ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
由于某种原因，需要做一个控制grid列显示的checkboxgroup，虽然extjs4中的gridpanel自带列表可以来控制列的显示隐藏，但是有这样的需求（需要一目了然）
下面先上图
接着前几天做的工作，今天上午完成了定制字段，思路是在上面的普通查询或者高级查询结束以后，获得了列的fields，columns等信息，然后交给一个处理函数 makecustommadepanel，该函数用来生成checkboxgroup，生成的时候给它加上一个事件，原本以为checkbox会有类似于check的事件，结果api看了看貌似只有个change事件可以用，md。。
下面贴下自己写的 makecustommadepanel函数。。用来根据grid的列自动生成checkboxgroup（整个grid的标头内容等信息均从后台得到，不管后台发来一个什么表，都能生成一个checkboxgroup来控制列的隐藏显示）
参数分别是gridpanel在reconfigure的时候用到的fields和columns,期中的var t=grid_a.columnmanager.headerct.items.get(th.itemid);是关键。。这句用来获得grid_a的列信息。。貌似在api中查不到。网上找了几中方法都不适合。又不想给每个列一个id。这是在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);
}}
}
);
}
}
在给出custommadepanel
ext.define('custommadepanel', {
extend : 'ext.form.panel',
title : '定制字段',
collapsible : true,
items : [ {
itemid:'custom',
xtype : 'checkboxgroup',
fieldlabel : '选择字段',
columns : 6,
items : []
}]
//collapsed:true,
});
var cusmadepanel=new custommadepanel();
我这种做法的不足也很明显，makecustommadepanel函数中的循环生成checkbox组件太耗时了，38个组件足足花了好几秒。。用户体验肯定不好。。
并且目前是在每次查询完之后都根据查询的结果生成一遍。。。我再想想好的解决办法
今天对makecustommadepanel做了优化，生成组件的速度与先前相比提升非常明显！
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);
思路就是先循环组好需要生成的组件对象，然后一次add，每一次add的开销非常大，变为一次速度真的提升了很多很多~
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论