急求!!请问如何让ColumnModel根据ComboBox选项来动态即时加载更新ColumnModel里的数据啊!!
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();
2024-11-19 广告