Javascript 为什么我的ExtJS数据网格填充为空?
在迁移到基于服务器的存储的过程中,我试图证明ExtJS datagrid的概念。目前我的代码如下:Javascript 为什么我的ExtJS数据网格填充为空?,javascript,ajax,datagrid,extjs,grid,Javascript,Ajax,Datagrid,Extjs,Grid,在迁移到基于服务器的存储的过程中,我试图证明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 m
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
});
这是为了紧跟Jesus Garcia的ExtJS中第159-161页的Hello世界级网格示例。目前,我的代码用一个空白的白色区域填充列名;也就是说,它在FF/Chrome上显示列名和空白白色区域,在IE6-8上似乎没有显示任何内容。在Chrome中,JavaScript控制台不显示任何错误消息或其他记录的信息
关于我的代码有什么问题或者如何修复它的任何建议吗?IE-6-8可能不喜欢dataIndex上悬空的逗号:“open\u amount”,以及FF/Chrome可以原谅的任何其他语法错误 你能发布你在FF/Chrome中看到的屏幕截图吗 您的代码可以简化很多。e、 g.简单地使用,而不是读卡器、代理、记录、存储组合 编辑-
我知道我的代码不是很枯燥;我的目标是按照这本书的方式进行概念验证。感谢您注意到不必要的逗号;现在,IE8呈现类似于Chrome和Firefox,而IE6-7则短暂地显示一些非常相似的外观,但随后表示网络连接已中止,并显示一个通用错误页面。您可以尝试上面的示例代码,或者在您的代码中,在定义存储后执行store.load。谢谢!它现在已经启动并运行,我正在启动并修补。谢谢
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);