Question

我是EXT Js的第一次学习者和示例http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#array-grid我试图找出如何填充表格并找不到表格内容的来源。之前使用过EXT Js的人应该发现找到数据来源是微不足道的，或者建议如何在jsfiddle这样的平台上测试extjs。

Answer 1

您可以通过许多程序获取网格数据。

第一种方法是将数据绑定到代码本身。

但在此之前如何绑定数据及其在网格中的工作方式，您需要创建data store，然后将此商店绑定到store中的网格。

以下是一个示例代码：

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { 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' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

这是适合你的小提琴。 Sencha Fiddle

您可以从JSON或XML获取数据的第二种方式。在这种情况下，您还必须创建data store（可能是json存储或数组存储）并再次绑定到网格。只有数据部分会改变。在这里，您需要使用一些ajax调用从json获取数据。

以下是示例代码。

    var store = new Ext.data.JsonStore({
        // store configs
        storeId: 'myStore',

        proxy: {
            type: 'ajax',
            url: 'get-images.php',
            reader: {
                type: 'json',
                rootProperty: 'images'
            }
        },

    //alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});

然后像以前的代码一样调用你的商店绑定。我建议你请仔细阅读这个链接

有用的链接

Grid PAnel _网格面板 Data Store - 数据存储 JSON STore

EXT JS如何获取数据

1 个答案: