如何动态修改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]
});