For some reason, you need to do a control of the grid column display CheckboxGroup, although the EXTJS4 in the Gridpanel list can control the display of the column hidden, but there is such a demand (need to glance)
Let's figure out
Then the last few days to do the work, this morning to complete the custom field, the idea is in the above ordinary query or advanced query end, get the column of fields,columns information, and then to a processing function makecustommadepanel, The function is used to generate CheckboxGroup, and when it is generated, add an event to it, which originally assumed that the checkbox would have an event similar to check, and the result API looked like only a change event could be used, MD.
Below, post your own Makecustommadepanel function. Used to automatically generate CheckboxGroup based on grid columns (the entire grid header content, etc. from the background, regardless of the background sent to a table, can generate a checkboxgroup to control the hidden display of columns)
The parameters are the fields and columns of the Gridpanel in reconfigure, and the Var t=grid_a.columnmanager.headerct.items.get (Th.itemid) of the period. This sentence is used to get the grid_a column information. Seemingly not found in the API. It is not suitable to find a few methods on the Internet. Do not want to give each column an ID. It was found on the stackoverflow.com/. Http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly
Copy Code code as follows:
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 giving a custommadepanel
Copy Code code as follows:
Ext.define (' Custommadepanel ', {
Extend: ' Ext.form.Panel ',
Title: ' Custom Fields ',
Collapsible:true,
Items: [{
ItemId: ' Custom ',
Xtype: ' CheckboxGroup ',
Fieldlabel: ' Select Fields ',
Columns:6,
Items: []
}]
Collapsed:true,
});
var cusmadepanel=new custommadepanel ();
The inadequacy of my approach is also obvious, and it takes a long time to generate a CheckBox component in the Makecustommadepanel function, 38 components take several seconds. The user experience must be bad.
And now after each query is based on the results of the query generated again ... I'll think of a good solution.
Today, the Makecustommadepanel is optimized and the speed of generating components is significantly higher than previously!
Copy Code code 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<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 first cycle the group good need to generate the component objects, and then add, each time the add cost is very large, changed to a speed really promoted a lot of a lot of ~
