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的开销非常大，变为一次速度真的提升了非常多非常多~