javascript - 空网格中的 Sencha Ext JS ArrayStore

Question

早上好，

我是 Sencha EXT JS 的新手，从字面上看，这是我的第一天。我创建了一个小应用程序，它在面板内创建一个网格，然后用 ArrayStore(硬编码)中的一些数据填充网格。该应用程序运行良好，但我在网格中得到三个空条目并且没有数据。有什么想法吗？

Ext.application({
name   : 'MyApp',

launch : function() {

Ext.onReady(function () {
    var store = new Ext.data.ArrayStore({ idProperty: 'storeTest', autoDestroy: true, storeId: 'myStore',idIndex: 0, fields: [{name: 'name', type: 'string'},{name: 'age', type: 'int'},]});

    var myData = [
        ['Person1',31],
        ['Person2',30],
        ['Person3',6]
    ];

    store.loadData(myData);

    var resultsPanel = Ext.create('Ext.panel.Panel', {
        title: 'Results',
        width: 1000,
        height: 400,
        renderTo: Ext.getBody(),
        layout: { type: 'hbox', align: 'stretch', padding: 5 },
        items: [{ xtype: 'grid', columns: [{header: 'Name'}, { header: 'Age' }], store: store, flex: 1 },
        { xtype: 'splitter' },
        { title: 'Details', bodyPadding: 5, items: [{ fieldLabel: 'Data item', xtype: 'textfield'}], flex: 2 }]
    });
});
}

});

Answer 1

您缺少每列的 dataIndex 属性:

[{ xtype: 'grid', columns: [{header: 'Name',dataIndex: 'name'}, { header: 'Age',dataIndex: 'age' }], store: store, flex: 1 },