Ext 之 GridPanel

最新推荐文章于 2023-06-17 22:52:50 发布

原创最新推荐文章于 2023-06-17 22:52:50 发布 · 947 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Ext

本文介绍如何使用ExtJS中的GridPanel组件展示数据。通过配置ColumnModel定义列信息，并利用Store管理数据源。示例展示了具体代码实现，包括数据加载及显示。

在学习使用Ext.grid.GridPanel中，从这篇文章中学到了不少东西，在此谢过了，有需要的朋友也可以看看。
总的来讲，Ext.grid.GridPanel需要指定两部分东西：
1、列的描述，靠的是：Ext.grid.ColumnModel
2、数据的描述，靠的是：Ext.data.Store
其他的东西都是点缀，代码如下：

var cm = new Ext.grid.ColumnModel([
    {header:'代单号',dataIndex:'daiDanHao', width : 100},
    {header:'运单号',dataIndex:'yunDanHao', width : 100},
    {header:'结算方式',dataIndex:'jieSuanFangShi', width : 100},
    {header:'日期',dataIndex:'riQi', width : 100},
    {header:'始发站',dataIndex:'shiFaZhan', width : 100},
    {header:'到达站',dataIndex:'daoDaZhan', width : 150},
    {header:'航班号',dataIndex:'hangBanHao', width : 100},
    {header:'代理人',dataIndex:'daiLiRen', width : 150},
    {header:'开单人',dataIndex:'kaiDanRen', width : 50}    
]);

cm.defaultSortable = true;

var	data = [{"daiDanHao":"D007","daiLiRen":"","daoDaZhan":"上海","hangBanHao":"CZ1024","jieSuanFangShi"
:"到付","kaiDanRen":"敏","riQi":"2008-07-20","shiFaZhan":"广州","yunDanHao":"Y007"},{"daiDanHao":"D008","daiLiRen"
:"","daoDaZhan":"长沙","hangBanHao":"CZ2048","jieSuanFangShi":"到付","kaiDanRen":"敏","riQi":"2008-07-20"
,"shiFaZhan":"广州","yunDanHao":"Y008"}];
	
var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({
    	}, [
        {name: 'daiDanHao',mapping: 'daiDanHao'},
        {name: 'yunDanHao',mapping: 'yunDanHao'},
        {name: 'jieSuanFangShi',mapping: 'jieSuanFangShi'},
        {name: 'riQi',mapping: 'riQi'},
        {name: 'shiFaZhan',mapping: 'shiFaZhan'},
        {name: 'daoDaZhan',mapping: 'daoDaZhan'},
        {name: 'hangBanHao',mapping: 'hangBanHao'},
        {name: 'daiLiRen',mapping: 'daiLiRen'},
        {name: 'kaiDanRen',mapping: 'kaiDanRen'}
    ])
});

ds.load();

var billGrid = new Ext.grid.GridPanel({
	name: 'billgrid',
	ds: ds,
	cm: cm,
	viewConfig: {
	    forceFit: true
	},
	sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
	bbar: new Ext.PagingToolbar({
		store: ds,
		displayInfo: true,
		displayMsg: '一共 {2} 条记录',
		emptyMsg: "没有记录"
	}),
	height: 300
});

如果data改变了需要刷新的话必须要
    ds.reload();
才行，如果要使用其他数据的话就要重新指定了：
    ds.proxy = new Ext.data.MemoryProxy(data1),
    ds.reload();

标签

#ext #header