在现有 HTML 页面上使用 ExtJs Grid

Question

我需要在 HTML 页面上创建一个网格。我能够做到这一点，但整个过程让我在我的解决方案中包含了完整的 Ext sdk 文件夹，这使我的应用程序变得相当大。我不想使用所有东西，我的应用程序也不使用 MVC 架构。我想要做的就是在我的页面上创建一个网格组件。目前我是这样做的：

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">

        <title>Sample Usage</title>
        <link rel="stylesheet" type="text/css" href="ExtJSIncludes/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
        <script src="ExtJSIncludes/ext.js"></script>
    </head>
    <body>
        <div id="divSampleGrid"></div>
        <script>
            Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
    { 'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244"  },
    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
]},
proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        rootProperty: 'items'
    }
}
});
                Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
co

lumns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: 'divSampleGrid'
});
            });
        </script>
    </body>
    </html>

我的 'ExtJSIncludes' 文件夹包含所有内容。我真的需要那个吗？我需要为网格包含的最小文件是什么？是否有任何标准的 js 文件连同 css 是唯一的要求？就像 JQuery?

Answer 1

只需包含 ext-all.js 而不是 ext.js。

这里是所有可能的 Ext 脚本的好读物，具体取决于您希望如何使用..Read

在现有 HTML 页面上使用 ExtJs Grid

Using ExtJs Grid on existing HTML page

extjs

extjs5