ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014-05-02 00:00
597 查看
由于某种原因,需要做一个控制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
在给出customMadePanel
我这种做法的不足也很明显,makeCustomMadePanel函数中的循环生成checkbox组件太耗时了,38个组件足足花了好几秒。。用户体验肯定不好。。
并且目前是在每次查询完之后都根据查询的结果生成一遍。。。我再想想好的解决办法
今天对makeCustomMadePanel做了优化,生成组件的速度与先前相比提升非常明显!
思路就是先循环组好需要生成的组件对象,然后一次add,每一次add的开销非常大,变为一次速度真的提升了很多很多~
下面先上图
接着前几天做的工作,今天上午完成了定制字段,思路是在上面的普通查询或者高级查询结束以后,获得了列的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的开销非常大,变为一次速度真的提升了很多很多~
相关文章推荐
- ExtJS4给Combobox设置列表中的默认值示例
- ExtJS4利根据登录后不同的角色分配不同的树形菜单
- jsPDF导出pdf示例
- js日期联动示例
- 离开当前页面前使用js判断条件提示是否要离开页面
- paip.关于动画特效原理 html js 框架总结
- paip.关于动画特效原理 html js 框架总结
- js正则表达式
- (转)IntelliJ IDEA 使用JSTL标签库(IDEA 加载 tld文件)
- js写的一个html游戏向导模块
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传
- 正则表达式常用知识点总结
- [Javascript] Window的属性
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传
- 使文件下载的自定义连接支持 FlashGet 的断点续传多线程链接下载! JSP/Servlet 实现!
- C# JSON转换以及编码转换
- javascript学习笔记
- js BDD Test framework jasmine
- js学习小结(五)2014.5.1(视口,window的onscroll事件,返回顶端特效)
- JSF2.0实战 - 4、自定义组件