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