首页 > 代码库 > 如何动态修改grid的列名
如何动态修改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]});
如何动态修改grid的列名
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。