【转】ExtJs Grid自动生成列
时间:2010-08-19 来源:火冰·瓶
这个问题纠结了我很久,本来想找个插件来解决的,但好像很少拿Extjs做报表啊,这么常用的功能竟然没有好的解决办法,唯一找到的一个插件就是AutoGrid2,可并不能解决问题,最后在老外的一段代码下终于找到了解决方法,原来如此简单.
数据源:'/Scripts/11.js' 也可以是aspx、jsp页面或者servlet
1: {'data':[{'number':'1','text1': '3','info1': '4','special1': '5'},{'number':'1','text1': '3','info1': '4','special1': '5'}],
2: 'columModle':[
3: {'header': '序号','dataIndex': 'number','width':40},
4: {'header': '编码','dataIndex': 'text1'},
5: {'header': '名称','dataIndex': 'info1'},
6: {'header': '金额','dataIndex': 'special1'}
7: ],
8: 'fieldsNames':[{name: 'number'},{name: 'text1'}, {name: 'info1'},{name: 'special1'}]
9: }
1: Ext.onReady(function() {
2:
3: var conn = new Ext.data.Connection();
4: conn.request({ url: '/Scripts/11.js', callback: function(options, success, response) {
5: var json = new Ext.util.JSON.decode(response.responseText);
6: var cm = new Ext.grid.ColumnModel(json.columModle);
7: var ds = new Ext.data.JsonStore({
8: data: json.data,
9: fields:json.fieldsNames
10: });
11: var grid = new Ext.grid.GridPanel({
12: "> 13: width: 400,
14: region: 'center',
15: split: true,
16: border: false,
17: store: ds,
18: cm: cm
19: });
20:
21: grid.render('grid-example');
22: }
23: });
-------------------------------------------------
以参看下:
var cmItems = [];
var cmConfig = {};
cmItems.push(new Ext.grid.RowNumberer());
cmItems.push(sm);
cmItems.push({header : 'id',dataIndex : 'id',hidden : true,sortable : true});
cmItems.push({header : '单据编号',dataIndex : 'no',sortable : true});
cmItems.push({header : '组织',dataIndex : 'orgName',sortable : true});
cmItems.push({header : '上报日期',dataIndex : 'reportDate',sortable : true});
var priceTypeList = results.root
for(var i=0;i<priceTypeList.length;i++){
cmConfig = {header : priceTypeList[i].priceType,dataIndex : 'priceType'+priceTypeList[i].id,width : 100,sortable : true}
cmItems.push(cmConfig);
}
cmItems.push({header : ' 备注',dataIndex : 'note',width : 150,sortable : true});
cmItems.push({header : '创建人',dataIndex : 'createUserName',sortable : true});
cmItems.push({header : '创建日期',dataIndex : 'createDate',width : 120,sortable : true});
cmItems.push({header : '修改人',dataIndex : 'updateUserName',sortable : true});
cmItems.push({header : '修改日期',dataIndex : 'updateDate',width : 120,sortable : true});
cmItems.push({header : '状态',dataIndex : 'state',sortable : true});
// 信息列
var cm = new Ext.grid.ColumnModel(cmItems);