煎茶的Ext JS ArrayStore網格空

Question

早安，

我是全新的，以煎茶EXT JS，像literately這是我的第一天。我創建了一個小型應用程序，在面板中創建一個Grid，然後用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 },