How does ExtJS4 automatically generate checkbox_extjs columns that control grid display and hide?

You need to create 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, you can refer to it for some reason, you need to create 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, you need to make it clear at a glance)

Below first



Next, I completed the customized fields in the previous few days. The idea is that after the preceding common query or advanced query is completed, I got information about columns, such as fields and columns, then, a processing function named makeCustomMadePanel is provided to generate the checkboxgroup. When it is generated, an event is added to it. In the original sense, there will be a check event in the checkbox, as a result, it seems that only one change event can be used by API, MD ..

Paste the makeCustomMadePanel function you have written below .. The checkboxgroup is automatically generated based on the grid columns (the header content and other information of the entire grid 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)

The parameters are fields and columns used by gridpanel during reconfigure. The key is var t = grid_a.columnManager.headerCt.items.get (th. itemId .. This statement is used to obtain the column information of grid_a .. It seems that the api cannot be found. It is not appropriate to find Chinese methods on the Internet. You do not want to give each column an ID. This is the token found on stackoverflow.com .. Http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly

The Code is as follows:

Function makeCustomMadePanel (fields, cl)
{

Var x = cusMadePanel. getComponent ('custom ');
// Console. log (cusMadePanel. getComponent ('custom '));
For (var I = 0; 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 customMadePanel

The Code is as follows:

Ext. define ('mmmmadepanel ',{
Extend: 'ext. form. Panel ',
Title: 'custom field ',
Collapsible: true,
Items :[{
ItemId: 'custom ',

Xtype: 'checkboxgroup ',

FieldLabel: 'select field ',
Columns: 6,
Items: []


}]
// Collapsed: true,
});
Var cusMadePanel = new customMadePanel ();

My shortcomings in this approach are also obvious. It takes too much time to generate the checkbox component cyclically in the makeCustomMadePanel function. It takes several seconds to generate 38 components .. The user experience must be poor ..

At present, it is generated based on the query results after each query... I want to find a solution.


Today, we have optimized makeCustomMadePanel and improved the generation speed of components significantly compared with the previous one!

The Code is as follows:

Function makeCustomMadePanel (fields, cl)

CusMade = 1;
Var x = cusMadePanel. getComponent ('custom ');
// Console. log (cusMadePanel. getComponent ('custom '));
Var fie = [];
For (var I = 0; 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 cyclically set the component objects to be generated, and then add each time. The overhead of each add operation is very large, and the speed has actually increased a lot ~