快捷導(dǎo)航

ExtJS4如何自動(dòng)生成控制grid的列顯示、隱藏的checkbox

更新時(shí)間：2014年05月02日 11:50:42 作者：

需要做一個(gè)控制grid列顯示的checkboxgroup，雖然EXTJS4中的gridpanel自帶列表可以來控制列的顯示隱藏,需要的朋友可以參考下

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

下面先上圖

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

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

參數(shù)分別是gridpanel在reconfigure的時(shí)候用到的fields和columns,期中的var t=grid_a.columnManager.headerCt.items.get(th.itemId);是關(guān)鍵。。這句用來獲得grid_a的列信息。。貌似在api中查不到。網(wǎng)上找了幾中方法都不適合。又不想給每個(gè)列一個(gè)ID。這是在stackoverflow.com/上找到的。。http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly

復(fù)制代碼代碼如下:

 
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

復(fù)制代碼代碼如下:

 
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組件太耗時(shí)了，38個(gè)組件足足花了好幾秒。。用戶體驗(yàn)肯定不好。。

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

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

復(fù)制代碼代碼如下:

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