如何在 html 中显示简单的 Extjs 6 组件？

Question

我的 objective 是使用 EXTJS 6 创建一个简单的组件（例如网格）并在 HTML div 中显示它，但我不知道我需要哪些资源为了那个原因。这是我的代码：

<?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":"lisa@simpsons.com",  "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 创建的旧应用程序。

Answer 1

Ext.grid.Grid 在 ExtJS 中不是有效的 class。网格的正确 class 是 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
});

现在可以用了吗？

如何在 html 中显示简单的 Extjs 6 组件？

How to show simple Extjs 6 component in html?

html

javascript

css

extjs

extjs5