本文展示了一个使用ExtJS框架创建网格面板的例子。该网格包含编号、名称、性别和描述等字段，通过MemoryProxy加载静态数据，并使用ArrayReader解析数据。示例代码详细展示了ColumnModel的配置方法以及Store的数据绑定过程。
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /><script type="text/javascript" src="../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-all.js"></script><script type="text/javascript" src="../examples.js"></script><html> <div id="grid"/></html><script>
Ext.onReady(function() ...{
test2();
}); function test2() ...{ var cm = new Ext.grid.ColumnModel([
...{header:'编号', dataIndex:'id'}, ...{header:'名称', dataIndex:'name'}, ...{header:'描述', dataIndex:'descn'} ]); var data = [ ['1', 'male', 'name1', 'descn1'], ['2', 'female', 'name2', 'descn2'], ['3', 'male', 'name3', 'descn3'], ['4', 'female', 'name4', 'descn4'], ['5', 'male', 'name5', 'descn5'] ]; var ds = new Ext.data.Store(...{ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader(...{}, [ ...{name: 'id'}, ...{name: 'sex'}, ...{name: 'name'}, ...{name: 'descn'} ])
}); ds.load(); // 一定要在ds和cm都写好了以后再写grid
var grid = new Ext.grid.GridPanel(...{
el: 'grid',// html中div的id
ds: ds,
cm: cm
});
grid.render();
}
function test1() ...{
//var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
/**//*{header:'NO.',renderer:function(value, cellmeta, record, rowIndex){
return rowIndex + 1;
}},*/
//new Ext.grid.RowNumberer(),
//sm,
...{header:'编号',dataIndex:'id', sortable:true},
...{header:'名称',dataIndex:'name', sortable:true},
...{header:'性别',dataIndex:'sex', sortable:true},
...{header:'描述',dataIndex:'descn', sortable:true}
]);
var data = [
['1','name1','male', 'descn1'],
['2','name2','female', 'descn2'],
['3','name3','male', 'descn3'],
['4','name4','female', 'descn4'],
['5','name5','male', 'descn5']
];
var ds = new Ext.data.Store(...{
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader(...{}, [
...{name: 'id', mapping:0},
...{name: 'name', mapping:1},
...{name: 'sex', mapping:2},
...{name: 'descn', mapping:3}
])
});
ds.load();
var grid = new Ext.grid.GridPanel(...{
el: 'grid',
cm: cm,
ds: ds/**//*,
sm: sm,
bbar: new Ext.PagingToolbar({
pageSize: 3,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})*/
});
grid.render();
}
</script>
var grid = new Ext.grid.GridPanel(...{ el: 'grid',// html中div的id ds: ds, cm: cm }); grid.render(); } function test1() ...{ //var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ /**//*{header:'NO.',renderer:function(value, cellmeta, record, rowIndex){ return rowIndex + 1; }},*/ //new Ext.grid.RowNumberer(), //sm, ...{header:'编号',dataIndex:'id', sortable:true}, ...{header:'名称',dataIndex:'name', sortable:true}, ...{header:'性别',dataIndex:'sex', sortable:true}, ...{header:'描述',dataIndex:'descn', sortable:true} ]); var data = [ ['1','name1','male', 'descn1'], ['2','name2','female', 'descn2'], ['3','name3','male', 'descn3'], ['4','name4','female', 'descn4'], ['5','name5','male', 'descn5'] ]; var ds = new Ext.data.Store(...{ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader(...{}, [ ...{name: 'id', mapping:0}, ...{name: 'name', mapping:1}, ...{name: 'sex', mapping:2}, ...{name: 'descn', mapping:3} ]) }); ds.load(); var grid = new Ext.grid.GridPanel(...{ el: 'grid', cm: cm, ds: ds/**//*, sm: sm, bbar: new Ext.PagingToolbar({ pageSize: 3, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" })*/ }); grid.render(); }</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
