首页 > 代码库 > 如何动态修改grid的列名

如何动态修改grid的列名

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

如何动态修改grid的列名

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

clip_image001

clip_image002

实现思路:通过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]});

如何动态修改grid的列名