Extjs动态生成表头

var cm = [{

header : "编号",

dataIndex : "id",

width : 65

}, {

header : "名称",

dataIndex : "name",

width : 65

}, {

header : "路径",

dataIndex : "url",

width : 65

}]

var colModel = new Ext.grid.ColumnModel({

columns : cm

});

var fd = ["id", "name", "url"];

var store = new Ext.data.JsonStore({

fields : fd

})

var grid = new Ext.grid.GridPanel({

cm : colModel,

store : store,

tbar : [{

xtype : "combo",

id : 'my_combo',

triggerAction : "all",

store : ["新增列","更换列"],

mode : 'local',

resizable : true,

editable: false,

lazyRender : true,

width : 100

},"-",{

text : "生成",

icon : "images/icons/add.png",

cls : "x-btn-text-icon",

handler : function() {

var temp = Ext.getCmp('my_combo').getValue();

if(temp == null || temp == "") return;

var newfd="";

var newcm="";

if(temp == "新增列"){//在原有列的基础上追加新的列

newfd = fd;

newcm = cm;

var res = {//要添加的列信息,可以动态获取

fields : [{

name : "sex"

}],

columns : [{

header : '性别',

dataIndex : "sex",

width : 65

}]

};

var fields = res.fields;

var columns = res.columns;

for (var i = 0; i < fields.length; i++) {//自己可以写控制不重复追加

newfd.push(fields[i]);

newcm.push(columns[i]);

}

}else if(temp == "更换列"){//更换表格中所有的列

var res = {//要更换的列信息,可以动态获取

fields : ["number", "age", "address"],

columns : [{

header : '号码',

dataIndex : "number",

width : 80

},{

header : '年龄',

dataIndex : "age",

width : 80

},{

header : '地址',

dataIndex : "address",

width : 80

}]

};

newfd = res.fields;

newcm = res.columns;

}

// 重新绑定store及column

newStore = new Ext.data.JsonStore({

fields : newfd

});

var newColumnModel = new Ext.grid.ColumnModel(newcm);

grid.reconfigure(newStore , newColumnModel);//使用新的Store和ColumnModel并刷新

//列变动之后，就可以做数据的加载了，加载的就是对应新的列的数据了。

}

}]

})

var myWin = new Ext.Window({

title:"动态改变ColumnModel",

width : '600',

height : 500,

frame : true,

layout : 'fit',

items : [grid]

});

myWin.show();