How does ExtJS4 automatically generate a column display hidden checkbox that controls the grid

For some reason, we need to make a checkboxgroup to control the display of grid columns. Although the gridpanel in EXTJS4 comes with a list to control the display and hiding of columns, there is a requirement (it needs to be clear).

Let's go to the top

< img SRC = "border = 0 / / img.jbzj.com/file_images/article/201405/20140502115025.gif? 201442115038 ">  

Then do a few days ago, this morning to complete the custom fields, train of thought is in the common query or above after the advanced query, obtained the fields of column, columns and other information, and then to a handler makeCustomMadePanel, this function is used to generate checkboxgroup, generated to it with an event, thought there will be similar to check the checkbox, result looked at seems to be only a change event API can be used, MD.

Below, paste their own written makeCustomMadePanel function. To automatically generate checkboxgroup according to the column of the grid (the header content of the entire grid and other information are obtained from the background, no matter what table is sent from the background, a checkboxgroup can be generated to control the hidden display of columns)

Parameters are respectively gridpanel use when reconfigure fields and columns, the period of the var t = grid_a columnManager. HeaderCt. Items. Get (th. ItemId); Is the key. This sentence is used to get the column information of grid_a. It doesn't look up in the API. Found a few methods on the Internet are not suitable. I don't want to give each column an ID. This is from stackoverflow.com/. http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly

 
function makeCustomMadePanel(fields,cl) 
{ 

var x=cusMadePanel.getComponent('custom'); 
//console.log(cusMadePanel.getComponent('custom')); 
for(var i=0;i<fields.length;i++) 
{ 
x.add( 
{ 
xtype : 'checkboxfield', 
boxLabel : cl[i].header, 
inputValue : fields[i].name, 
checked:true, 
itemId:i, 
name : 'custom', 
listeners : { 
change : function(th, value, oldValue,eop) { 

var t=grid_a.columnManager.headerCt.items.get(th.itemId); 
if(t.isVisible()){ 

t.setVisible(false); 
} 
else{ 
t.setVisible(true); 
} 
//grid_a.columns[3].setVisible(false); 
}} 

} 
); 
} 
} 

In the given customMadePanel

 
Ext.define('customMadePanel', { 
extend : 'Ext.form.Panel', 
title : ' Custom fields ', 
collapsible : true, 
items : [ { 
itemId:'custom', 

xtype : 'checkboxgroup', 

fieldLabel : ' Select field ', 
columns : 6, 
items : [] 


}] 
//collapsed:true, 
}); 
var cusMadePanel=new customMadePanel(); 

The e disadvantage of my approach is also obvious. The loop in the makeCustomMadePanel function generates the checkbox components in too long, taking several seconds for 38 components. The user experience is definitely not good.

And is currently in the end of each query according to the results of the query generated once... I'll think of a better solution


The makeCustomMadePanel has been optimized today, and the speed of generating components is much faster than before!

 
function makeCustomMadePanel(fields,cl) 

cusMade=1; 
var x=cusMadePanel.getComponent('custom'); 
//console.log(cusMadePanel.getComponent('custom')); 
var fie=[]; 
for(var i=0;i<fields.length;i++) 
{ 
//x.add( 
var temp= 
{ 
xtype : 'checkboxfield', 
boxLabel : cl[i].header, 
//inputValue : fields[i].name, 
checked:true, 
itemId:i, 
name : 'custom', 
listeners : { 
change : function(th, value, oldValue,eop) { 

var t=grid_a.columnManager.headerCt.items.get(th.itemId); 
//console.log(t.isVisible()); 
//console.log('break'); 
if(t.isVisible()){ 

t.setVisible(false); 
} 
else{ 
t.setVisible(true); 
} 
//console.log(t.isVisible()); 
//var t1=grid_a.columnManager.headerCt.items.get(th.itemId); 
//console.log(t1); 
//grid_a.columns[3].setVisible(false); 
}} 

}; 
//console.log(temp); 
fie.push(temp); 
} 
//console.log(fie); 
x.add(fie); 

The idea is to loop through the group of component objects that need to be generated, and then add once. Each time add is very expensive, and the speed is really improved a lot