如何动态修改grid的列名

有这样的需求,搜索时候会选择搜索类型,每种搜索类型展示的列名不一样

如何动态修改grid的列名

效果图:点击bColumn页面切换成bColumn









实现思路:通过grid的reconfigure方法,传入store和columnModel对象,使grid重新渲

相关代码:

var selModel1 = new Ext.grid.CheckboxSelectionModel({
singleSelect:false
});
var aColumn = [
selModel1,
{header:'aColumn1',dataIndex:'aColumn1'},
{header:'aColumn2',dataIndex:'aColumn2'},
{header:'aColumn3',dataIndex:'aColumn3'},
{header:'aColumn4',dataIndex:'aColumn4'}
];
var bColumn = [
selModel1,
{header:'bColumn1',dataIndex:'bColumn1'},
{header:'bColumn2',dataIndex:'bColumn2'},
{header:'bColumn3',dataIndex:'bColumn3'}
];

var colModel1 = new Ext.grid.ColumnModel({
columns:aColumn
});

var colModel2 = new Ext.grid.ColumnModel({
columns:bColumn
});
var grid = new Ext.grid.GridPanel({
id:'gridTest',
title:'Dynamic Colum Test',
width:500,
selModel:selModel1,
colModel:colModel1,
store:new Ext.data.JsonStore({}),
viewConfig:new Ext.grid.GridView({
forceFit:true
})
});
grid.render(Ext.fly('div1'));

var radio = new Ext.form.RadioGroup({
id:'switchColum',
width:300,
items:[{
boxLabel:'aColumn',
name:'switchColum',
inputValue:'aColumn'
},{
boxLabel:'bColumn',
name:'switchColum',
inputValue:'bColumn'
}],
listeners:{
change:function(g,checked){//使用reconfigure方法可以实现重新配置
var v = checked.getRawValue();
var gridTest = Ext.getCmp('gridTest');
if(v == 'aColumn'){
gridTest.reconfigure(gridTest.store,colModel1);
}else if(v =='bColumn'){
gridTest.reconfigure(gridTest.store,colModel2);
}
}
}
});

var form = new Ext.form.FormPanel({
border:false,
renderTo:Ext.fly('div2'),
items:[radio]
});