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

});