1、定义DataStore的Fields和Grid的Columns,这两个的格式和静态生成Grid时采用的是格式一样的,区别就是他们现在是根据程序动态生成的
var s_fields = '';
var s_columns = '';
for(var i = 0; i < data[0].length; i++){
if(s_fields.length > 0){
s_fields += ',';
}
if(s_columns.length > 0){
s_columns += ',';
}
s_fields += '{name:"' + data[0][i] + '"}';
s_columns += '{header:"' + data[0][i] + '",dataIndex:"' + data[0][i] + '",width:20,sortable:true}';
}
2、根据s_fields和s_columns的内容生成需要的DataStore和ColumnModel
var fields = eval('([' + s_fields + '])');
var store = new Ext.data.SimpleStore({fields : fields});
store.loadData(gridData);
//gridData为一二维数组,每一列对应store的一个field
var cm = new Ext.grid.ColumnModel(eval('([' + s_columns + '])'));
3、生成Grid(代码片断)
.....
.....
items :new Ext.grid.GridPanel({
ds : store,
cm : cm,
.....
.....
动态生成ExtJS Grid教程
本文介绍如何使用ExtJS框架动态生成Grid组件的过程。通过解析数据结构定义DataStore的Fields和Grid的Columns,并利用这些配置生成DataStore和ColumnModel,最终创建出GridPanel。适用于需要动态展示表格数据的应用场景。
1万+

被折叠的 条评论
为什么被折叠?



