由于某種原因，需要做一個控制grid列顯示地checkboxgroup，雖然extjs4中地gridpanel自帶列表可以來控制列地顯示隱藏，但是有這樣地需求（需要一目了然）
下面先上圖
接著前幾天做地工作，今天上午完成了定制字段，思路是在上面地普通查詢或者高級查詢結(jié)束以后，獲的了列地fields，columns等信息，然后交給一個處理函數(shù) makecustommadepanel，該函數(shù)用來生成checkboxgroup，生成地時候給它加上一個事件，原本以為checkbox會有類似于check地事件，結(jié)果api看了看貌似只有個change事件可以用，md..
下面貼下自己寫地 makecustommadepanel函數(shù)..用來根據(jù)grid地列自動生成checkboxgroup（整個grid地標(biāo)頭內(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個組件足足花了好幾秒..用戶體驗(yàn)肯定不好..
并且目前是在每次查詢完之后都根據(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)橐淮嗡俣日娴靥嵘撕芏嗪芏鄜