爲什麼我的ExtJS datagrid填充爲空？

Question

我正在嘗試做一個概念驗證ExtJS datagrid途中移動到基於服務器的商店。目前我的代碼如下：

var arrayData = [ 
    ['', 'Held', '', '', 'abc', '', '100.00', '0.00', 'Internal Approval'], 
    /* 11 similar rows deleted for sanitization's sake */ 
    /* I've tried with and without quotes around the monetary amounts. */ 
    ]; 

var nameRecord = Ext.data.Record.create([ 
    {name: 'approved_date', mapping: 1}, 
    {name: 'approval_status', mapping: 2}, 
    {name: 'approval_id', mapping: 3}, 
    {name: 'reference_id', mapping: 4}, 
    {name: 'manufacturer_distributor_name', mapping: 5}, 
    {name: 'shipping_authorization_number', mapping: 6}, 
    {name: 'purchase_order_number', mapping: 7}, 
    {name: 'original_amount', mapping: 8}, 
    {name: 'open_amount', mapping: 9}, 
    {name: 'requestor', mapping: 10} 
    ]); 

var arrayReader = new Ext.data.ArrayReader({}, nameRecord); 

var memoryProxy = new Ext.data.MemoryProxy(arrayData); 

var store = new Ext.data.Store({ 
    reader: arrayReader, 
    proxy: memoryProxy 
    }); 

var columnModel = new Ext.grid.ColumnModel([ 
    { 
    header: 'Approved Date', 
    sortable: true, 

    dataIndex: 'approved_date' 
    }, 
    { 
    header: 'Approval Status', 
    sortable: true, 
    dataIndex: 'approval_status' 
    }, 
    { 
    header: 'Approval ID', 
    sortable: true, 
    dataIndex: 'approval_id' 
    }, 
    { 
    header: 'Reference ID', 
    sortable: true, 
    dataIndex: 'reference_id' 
    }, 
    { 
    header: 'Manufacturer/Distributor Name', 
    sortable: true, 
    dataIndex: 'manufacturer_distributor_name' 
    }, 
    { 
    header: 'Shipping Authorization Number', 
    sortable: true, 
    dataIndex: 'shipping_authorization_number' 
    }, 
    { 
    header: 'Purchase Order Number', 
    sortable: true, 
    dataIndex: 'purchase_order_number' 
    }, 
    { 
    header: 'Original Amount', 
    sortable: true, 
    dataIndex: 'original_amount' 
    }, 
    { 
    header: 'Open Amount', 
    sortable: true, 
    dataIndex: 'open_amount', 
    }, 
    { 
    header: 'Requestor', 
    sortable: true, 
    dataIndex: 'requestor' 
    }]); 

var gridView = new Ext.grid.GridView(); 

var selectionModel = new Ext.grid.RowSelectionModel({ 
    singleSelect: true 
    }); 

var grid = new Ext.grid.GridPanel({ 
    title: 'Approvals', 
    renderTo: Ext.getBody(), 
    height: 500, 
    width: 700, 
    store: store, 
    view: gridView, 
    colModel: columnModel, 
    selModel: selectionModel 
    }); 

這是爲了緊跟上頁的「世界，你好」級電網例如耶穌加西亞的行動ExtJS的159-161。就目前而言，我的代碼使用空白區域填充列名稱;也就是說，它會在FF/Chrome上顯示列名和一個空白區域，並且在IE6-8上似乎沒有顯示任何內容。在Chrome中，JavaScript控制檯不顯示任何錯誤消息或其他記錄的信息。

任何關於我的代碼有什麼問題或我如何修復它的建議？

Answer 1

IE-6-8可能不喜歡在dataIndex: 'open_amount',懸空逗號（以及任何其他有語法錯誤，FF /鉻會原諒）

你可以發佈你所看到的FF/Chrome後的截圖？

您的代碼可以簡化很多。例如只需使用ArrayStore，而不是閱讀器，代理，記錄，存儲組合

編輯 -

var grid = new Ext.grid.GridPanel({ 
    title: 'Approvals', 
    renderTo: Ext.getBody(), 
    height: 500, 
    width: 700, 
    store: new Ext.data.ArrayStore({ 
     idIndex:0, 
     fields: ['approved_date', 'approval_status',{name:'approval_id', type:'int'}] //specify other fields here 
    }), 
    cm:new Ext.grid.ColumnModel({ 
     defaults:{ 
     sortable:true, 
     width:200 
     }, 
     columns:[{ 
     header:'Approval Date', 
     dataIndex:'approved_date' 
     },{ 
     header:'Approval Status', 
     dataIndex:'approval_status' 
     },{ 
     header:'Approval ID', 
     dataIndex:'approval_id' 
     }]      
    }) 
}); 

var myData=[ 
    ['01/01/11','Held', 1], 
    ['02/02/11','Approved', 2] 
] 

grid.getStore().loadData(myData);