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