ExtJS4 how to automatically generate columns to control grid display, hidden Checkbox_extjs

Source: Internet
Author: User
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 ~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.