标签:style blog http io ar color 使用 sp for
有这样的需求,搜索时候会选择搜索类型,每种搜索类型展示的列名不一样
如何动态修改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] });
标签:style blog http io ar color 使用 sp for
原文地址:http://www.cnblogs.com/huchaolan/p/4139008.html