How to dynamically modify the column names of a grid

There is a need, search time will choose the type of search, each type of search shows the column name is different

How to dynamically modify the column names of a grid

: Click Bcolumn page to switch to Bcolumn

Implementation idea: Pass the reconfigure method of the grid, pass in the store and Columnmodel object, make the grid re-shading

Related code:

varSelModel1 =NewExt.grid.CheckboxSelectionModel ({singleselect:false});varAcolumn =[SelModel1, {header:' AColumn1 ', dataindex: ' AColumn1 '}, {header:' AColumn2 ', dataindex: ' AColumn2 '}, {header:' AColumn3 ', dataindex: ' AColumn3 '}, {header:' AColumn4 ', dataindex: ' AColumn4 '}];varBcolumn =[SelModel1, {header:' BColumn1 ', dataindex: ' BColumn1 '}, {header:' BColumn2 ', dataindex: ' BColumn2 '}, {header:' BColumn3 ', dataindex: ' BColumn3 '}];varColModel1 =NewExt.grid.ColumnModel ({columns:acolumn});varColModel2 =NewExt.grid.ColumnModel ({columns:bcolumn});varGrid =NewExt.grid.GridPanel ({ID:' Gridtest ', Title:' Dynamic colum Test ', Width:500, Selmodel:selmodel1, Colmodel:colmodel1, store:NewExt.data.JsonStore ({}), Viewconfig:NewExt.grid.GridView ({forcefit:true}); Grid.render (Ext.fly (' Div1 '));varRadio =NewExt.form.RadioGroup ({ID:' Switchcolum ', Width:300, items:[{Boxlabel:' Acolumn ', Name:' Switchcolum ', Inputvalue:' Acolumn '},{Boxlabel:' Bcolumn ', Name:' Switchcolum ', Inputvalue:' Bcolumn '}], listeners:{change:function(g,checked) {//reconfiguration can be achieved using the RECONFIGURE method            varv =Checked.getrawvalue (); varGridtest = ext.getcmp (' gridtest ')); if(v = = ' acolumn ')) {gridtest.reconfigure (GRIDTEST.STORE,COLMODEL1); }Else if(v = = ' bcolumn ')) {gridtest.reconfigure (GRIDTEST.STORE,COLMODEL2); }        }    }});varform =NewExt.form.FormPanel ({border:false, RenderTo:Ext.fly (' Div2 '), Items:[radio]});

How to dynamically modify the column names of a grid