为什么我的ExtJS数据网格填充为空
Why is my ExtJS datagrid populating as empty?
我正试图在迁移到基于服务器的商店的途中证明ExtJS数据网格的概念。目前我的代码如下:
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 in Action中第159-161页的"Hello world"级别网格示例。目前,我的代码用空白区域填充列名;也就是说,它在FF/Chrome上显示列名和空白区域,并且似乎在IE6-8上不显示任何东西。在Chrome中,JavaScript控制台不显示任何错误消息,或其他记录信息。
关于我的代码有什么问题或者我如何修复它的任何建议?
IE-6-8可能不喜欢dataIndex: 'open_amount',
的悬空逗号(以及FF/Chrome会原谅的任何其他语法错误)
你能张贴你在FF/Chrome中看到的截图吗?
你的代码可以简化很多。例如:使用ArrayStore代替reader,proxy,record,store组合
编辑-
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);
相关文章:
- 使用kendo js填充网格
- 点击剑道网格的编辑,在剑道窗口中填充文本框/DDL
- 确保填充网格时单词不会重复
- 用Javascript填充剑道网格列菜单过滤选项
- 使用getJSON填充动画响应图像网格
- 基于按钮点击填充剑道UI网格
- 在调用方法来填充详细信息网格之前,如何从填充的下拉列表中获取信息
- 使用 JavaScript 从数据库填充网格视图
- 嵌入光滑网格图以填充浏览器窗口
- 用网格填充三个.js场景
- Dojo 增强型数据网格未填充 JsonRest 存储
- 子网格未填充在免费的 jqGrid 中
- 使用复选框填充后网格
- 如何使用Zurb Foundation 4填充网格行
- 自动填充网格中的值(ProcessMaker)
- 在extjs中用行/列坐标填充网格
- 在D3.js中用空矩形填充网格
- 在给定的纵横比下用n个元素填充网格的算法
- 如何基于树视图节点填充网格(复选框选择)
- 用 Object3D 填充的对象文字 - 循环以填充网格