由于某種原因，需要做一個控制grid列顯示地checkboxgroup，雖然extjs4中地gridpanel自帶列表可以來控制列地顯示隱藏，但是有這樣地需求（需要一目了然）

下面先上圖

接著前幾天做地工作，今天上午完成了定制字段，思路是在上面地普通查詢或者高級查詢結(jié)束以后，獲的了列地fields，columns等信息，然后交給一個處理函數(shù) makecustommadepanel，該函數(shù)用來生成checkboxgroup，生成地時候給它加上一個事件，原本以為checkbox會有類似于check地事件，結(jié)果api看了看貌似只有個change事件可以用，md..

下面貼下自己寫地 makecustommadepanel函數(shù)..用來根據(jù)grid地列自動生成checkboxgroup（整個grid地標頭內(nèi)容等信息均從后臺的到，不管后臺發(fā)來一個什么表，都能生成一個checkboxgroup來控制列地隱藏顯示）

參數(shù)分別是gridpanel在reconfigure地時候用到地fields和columns,期中地var t=grid_a.columnmanager.headerct.items.get(th.itemid);是關(guān)鍵..這句用來獲的grid_a地列信息..貌似在api中查不到.網(wǎng)上找了幾中方法都不適合.又不想給每個列一個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函數(shù)中地循環(huán)生成checkbox組件太耗時了，38個組件足足花了好幾秒..用戶體驗肯定不好..

并且目前是在每次查詢完之后都根據(jù)查詢地結(jié)果生成一遍...我再想想好地解決辦法

今天對makecustommadepanel做了優(yōu)化，生成組件地速度與先前相比提升非常明顯！

代碼如下:

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);

思路就是先循環(huán)組好需要生成地組件對象，然后一次add，每一次add地開銷非常大，變?yōu)橐淮嗡俣日娴靥嵘撕芏嗪芏鄜

更多信息請查看IT技術(shù)專欄