Current location - Plastic Surgery and Aesthetics Network - Plastic surgery and beauty - How does ExtJS4 automatically generate checkbox to control the display and hiding of columns in the grid?
How does ExtJS4 automatically generate checkbox to control the display and hiding of columns in the grid?
For some reason, it is necessary to make a checkboxgroup to control the display of grid columns. Although gridpanel in EXTJS4 has its own list to control the display and hiding of columns, there is such a demand (it needs to be clear at a glance).

Below is the picture first.

I finished customizing the fields this morning, following the work I finished a few days ago. The idea is to get the information of the column, such as fields and columns, after the ordinary query or advanced query is completed, and then hand it over to a processing function.

MakeCustomMadePanel, this function is used to generate checkboxgroup, and an event will be added to it when it is generated. At first, people thought that checkbox would have an event similar to check, but the API looked at it and it seems that only one change event, MD, can be used.

Post what you wrote below.

MakeCustomMadePanel function. . Used to automatically generate checkboxgroup according to the columns of the grid (the header content of the whole grid is obtained from the background, and the checkboxgroup can be generated to control the hidden display of columns no matter what table is sent in the background).

These parameters are the fields and columns used by gridpanel in reconfigure, and var uses these parameters during this period.

t = grid _ a . column manager . header CT . items . get(th . itemid); Is the key. . This sentence is used to get the column information of grid _ a. I can't seem to find it in the api. I found several methods on the internet, but none of them are suitable. I don't want to give each column an ID. This was found in stackoverflow.com/.. /questions/2079 1685/extjs-4-how-do-I-hide-show-grid-columns-on-the-fly

Copy code

The code is as follows:

function

MakeCustomMadePanel (field, cl)

{

defined variable

x = cusmadepanel . get component(' custom ');

//console . log(cusmadepanel . get component(' custom '));

For (var

I = 0; I & ltfields.lengthi++)

{

x.add(

{

xtype

Check box field',

Box label

cl[i]。 Title,

input value

Field [i]. Name,

Checked: correct,

itemId:i,

name

Custom',

listeners

{

change

Function (th,

Value,

Old value, eop)

{

defined variable

t = grid _ a . column manager . header CT . items . get(th . itemid);

if(t.isVisible()){

t . set visible(false);

}

Otherwise {

t . set visible(true);

}

//grid_a.columns[3]。 set visible(false);

}}

}

);

}

}

After giving it to customMadePanel

Copy code

The code is as follows:

Ext.define('customMadePanel ',

{

expand

External Form Panel',

title

Custom field',

knock-down

exactly,

project

[

{

ItemId: "custom",

xtype

Check box group',

Field label

Select field',

row

6,

project

[]

}]

//Fold: true,

});

defined variable

cusMadePanel=new

customMadePanel();

The shortcomings of my method are also obvious. It takes too long to generate checkbox components by looping through the makeCustomMadePanel function, and it takes a few seconds for 38 components. . The user experience is definitely not good. .

And it is currently generated according to the query results after each query. . . I'll think of a good way.

Today, makeCustomMadePanel is optimized, and the speed of generating components is obviously higher than before!

Copy code

The code is as follows:

function

MakeCustomMadePanel (field, cl)

cus made = 1;

defined variable

x = cusmadepanel . get component(' custom ');

//console . log(cusmadepanel . get component(' custom '));

defined variable

fie =[];

For (var

I = 0; I & ltfields.lengthi++)

{

//x.add(

defined variable

Temperature =

{

xtype

Check box field',

Box label

cl[i]。 Title,

//Enter a value

Field [i]. Name,

Checked: correct,

itemId:i,

name

Custom',

listeners

{

change

Function (th,

Value,

Old value, eop)

{

defined variable

t = grid _ a . column manager . header CT . items . get(th . itemid);

//console . log(t . is visible());

//console . log(' break ');

if(t.isVisible()){

t . set visible(false);

}

Otherwise {

t . set visible(true);

}

//console . log(t . is visible());

//var

t 1 = grid _ a . column manager . header CT . items . get(th . itemid);

//console . log(t 1);

//grid_a.columns[3]。 set visible(false);

}}

};

//console . log(temp);

fie . push(temp);

}

//console . log(fie);

x . add(fie);

The idea is to group the component objects that need to be generated circularly first, and then add them at one time. The cost of each addition is very high, and the speed is really improved ~