Как показать простой компонент Extjs 6 в html?

Моя цель - создать простой компонент, используя EXTJS 6 (например, сетку) и показать его в HTML-div, но я не знаю, какие ресурсы мне нужны для этого. Это мой код:Как показать простой компонент Extjs 6 в html?

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-  thymeleaf-spring3-3.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<link rel="stylesheet" type="text/css" th:href="@{/js/ext-6/classic/theme-triton/resources/theme-triton-all.css}" /> 
<link rel="stylesheet" type="text/css" th:href="@{/js/ext-6/packages/charts/classic/triton/resources/charts-all.css}" /> 
<link rel="stylesheet" type="text/css" th:href="@{/js/ext-6/packages/ux/classic/triton/resources/ux-all.css}" /> 

<script type="text/javascript" th:src="@{/js/ext-6/ext-all.js}" src="../../../js/ext-6/ext-all.js" > </script> 
<script type="text/javascript" th:src="@{/js/ext-6/classic/theme-triton/theme-triton.js}" src="../../../js/ext-6/classic/theme-triton/theme-triton.js"></script> 
<script type="text/javascript" th:src="@{/js/ext-6/packages/charts/classic/charts.js}" src="../../../js/ext-6/packages/charts/classic/charts.js"></script>  
<script type="text/javascript" th:src="@{/js/ext-6/packages/ux/classic/ux.js}" src="../../../js/ext-6/packages/ux/classic/ux.js"></script> 

<title>Ext6 </title> 
</head> 
<body> 
<script th:inline="javascript"> 
    /*<![CDATA[*/ 

Ext.onReady(function() { 
var store = Ext.create('Ext.data.Store', { 
    fields: ['name', 'email', 'phone'], 
    data: [ 
     { 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" } 
    ] 
}); 

Ext.create('Ext.grid.Grid', { 
    title: 'Simpsons', 
    renderTo : Ext.get("grid"), 
    store: store, 

    columns: [ 
     { text: 'Name', dataIndex: 'name', width: 200 }, 
     { text: 'Email', dataIndex: 'email', width: 250 }, 
     { text: 'Phone', dataIndex: 'phone', width: 120 } 
    ], 

    height: 200, 
    layout: 'fit', 
    fullscreen: true 
}); 
}); 
/*]]>*/ 
</script> 

<div id="grid"> 
</div> 
</body> 
</html>

Этот простой пример поможет мне обновить старое приложение, созданное ExtJS 4.

источник

2016-04-11 Wakrim

и я так сори для моего плохого английского :) – Wakrim

В чем проблема, он не показывает сетку? Есть ли ошибки в консоли? – serg

Создайте div, используйте document.getElementById, чтобы получить div. получить элемент сетки путем назначения в переменной myGrid = Ext.create ('Ext.grid.Grid ... и добавить дочерний элемент в div. – aviram83

Ext.grid.Grid не является допустимым классом в ExtJS. Правильный класс для сетки - Ext.grid.Panel.

Попробуйте следующее:

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    renderTo : Ext.get("grid"), 
    store: store, 

    columns: [ 
     { text: 'Name', dataIndex: 'name', width: 200 }, 
     { text: 'Email', dataIndex: 'email', width: 250 }, 
     { text: 'Phone', dataIndex: 'phone', width: 120 } 
    ], 

    height: 200, 
    layout: 'fit', 
    fullscreen: true 
});

Работает ли это сейчас?

источник

2016-04-12 09:03:01 ASP

yes tank you @ASP – Wakrim

Как показать простой компонент Extjs 6 в html?

ответ

Смежные вопросы