ExtJs动态grid的生成

在做报表的时候，需要将grid的列数做成活的，列数有数据库里的字段确定，这据需要将grid的列数做成动态的，经过多次实验已成，如下：

 

后台返回的json:

var cm = new Ext.grid.ColumnModel(json.columModle);

{'action':true,'message':'error!',

'data':[{'number':'1','text1': '3','info1': '4','special1': '5'}],

'columModle':[{'header': '序号','dataIndex': 'number','width':40},

{'header': '编码','dataIndex': 'text1'},

{'header': '名称','dataIndex': 'info1'},

{'header': '金额','dataIndex': 'special1'}

],'fieldsNames':[{name: 'number'},

{name: 'text1'}, {name: 'info1'},{name: 'special1'}]｝

 

var ds = new Ext.data.JsonStore({

data:json.data,

fields:json.fieldsNames

});

var grid = new Ext.grid.GridPanel({

region: 'center',

split: true,

border:false,

cm:cm,

ds:ds

});

grid.render(document.body);

new Ext.Viewport({

layout: 'border',

split: true,

items: [grid]

});

 

对于Ext动态grid这个问题，好多人都问过我，还有就是如何做多行表头，就是表头有两行以上，其中一列跨下边几列，对于多行表头的问题在这一会半会会说不清楚，只能告诉大家需要自己写插件。咱们还是说说动态表头的问题。

简单的说就是：从后台拼出json字符串--->前台取得字符串，并转化为json----->根据json创建grid

1.从后台拼出json字符串

2.前台取得字符串，并转化为json:

“{'action':true,'message':'error!',

'data':[ {'number':'1','text1': '3','info1': '4','special1': '5'}],

'columModle':[{'header': '序号','dataIndex': 'number','width':40},

{'header': '编码','dataIndex': 'text1'},

{'header': '名称','dataIndex': 'info1'},

{'header': '金额','dataIndex': 'special1'}],

'fieldsNames':[{name: 'number'},{name: 'text1'}, {name: 'info1'},

{name: 'special1'}]}”

Ext.Ajax.request({

url: '自己的url',

params: 'method=自己的方法',

method: 'POST',

success: function(rs,request){

var result = rs.responseText;//拿到结果集，此时为字符串

var json = Ext.util.JSON.decode(result);//将字符串转换为json类型

},

failure: function(rs,request){

}

});

 

3.根据json创建grid

Ext.Ajax.request({

url: '自己的url',

params: 'method=自己的方法',

method: 'POST',

success: function(rs,request){

var result = rs.responseText;//拿到结果集，此时为字符串

var json = Ext.util.JSON.decode(result);//将字符串转换为json类型

var cm = new Ext.grid.ColumnModel(json.columModle);

var ds = new Ext.data.JsonStore({

data:json.data,

fields:json.fieldsNames

});

var grid = new Ext.grid.GridPanel({

region: 'center',

split: true,

border:false,

cm:cm,

ds:ds

});

// grid.render(document.body);

 

creater_grid_alertWindow.removeAll();
creater_grid_alertWindow.add(grid);
creater_grid_alertWindow.show();

 

 

new Ext.Viewport({

layout: 'border',

split: true,

items: [grid]

});

},

failure: function(rs,request){

}

});

var creater_grid_alertWindow = new Ext.Window({
id : 'database_sql_Win',
title : '查询结果',
width : 550,
height : 400,
frame : true,
modal : true,
closeAction : 'hide',
resizable : false,
modal : true,
layout : 'fit',
items : []
});

注意的地方：首先grid必须在sucsess方法里实例，否则会报错，json数据也只在sucess方法里起作用。Ext的灵魂就是json很多控件都可以用以上方法实现。