ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox


Posted in Javascript onMay 02, 2014

由于某种原因,需要做一个控制grid列显示的checkboxgroup,虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,但是有这样的需求(需要一目了然)

下面先上图

ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox 

接着前几天做的工作,今天上午完成了定制字段,思路是在上面的普通查询或者高级查询结束以后,获得了列的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的开销非常大,变为一次速度真的提升了很多很多~
Javascript 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
浅谈js的异步执行
Oct 18 Javascript
Vue.js基础知识小结
Jan 13 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
Vue数据绑定简析小结
May 07 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 #Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 #Javascript
用json方式实现在 js 中建立一个map
May 02 #Javascript
jquery操作checkbox实现全选和取消全选
May 02 #Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 #Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 #Javascript
jquery等待效果示例
May 01 #Javascript
You might like
PHP has encountered an Access Violation
2007/01/15 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JS 常用校验函数
2009/03/26 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python 实现简单的客户端认证
2020/07/29 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
公司同意接收函
2014/01/13 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
灵山大佛导游词
2015/02/04 职场文书
奖金申请报告模板
2015/05/15 职场文书
《叶问2》观后感
2015/06/15 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL