由于某种原因，需要做一个控制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地开销非常大，变为一次速度真地提升了很多很多~

更多信息请查看IT技术专栏