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

赞 (0)

相关推荐

  • js父页面与子页面不同时显示的方法

    本文实例讲述了js父页面与子页面不同时显示的方法,可实现打开一个页面后,父页面DISABLE,在子页面关闭后,父页面ENABLE.分享给大家供大家参考.具体方法如下: 复制代码 代码如下: function onNewClick() {     var url = "VesselScheduleNEW.aspx";     if (null!=newWin && newWin.closed) newWin=null;        if (null==newWin)  

  • asp.net下用js实现鼠标移至小图，自动显示相应大图

    实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 .Net精简版本 <script language="JavaScript"> function GetShowImg(imgfile) { document.all("ShowImage").src = "/semir/images/"+ imgfile; } </script> //DataList绑定 <asp:datalist id="DlSi

  • JS测试显示屏分辨率以及屏幕尺寸的方法

    如何用JS特效显示自己的屏幕分辨率以及屏幕尺寸呢?请看下面一段代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • 上传图片时JS自动显示图片

    javascript 图片预览 function preview(imgFile,num) { //预览代码,支持 IE6.IE7. var newPreview = document.getElementById("preview1"); var t ; if(document.all) //IE t = imgFile.value; else t = imgFile.files[0].getAsDataURL(); //FF newPreview.style.backgroundI

  • jquery和js实现对div的隐藏和显示方法

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

  • 鼠标悬浮停留三秒后自动显示大图js代码

    鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的 <style> *{margin:0;padding:0;list-style-type:none;} img,a{border:0;} .piccon{height:75px;margin:100px 0 0 50px;} .piccon li{float:left;padding:0 10px;} #preview{position:absolute;border:1px solid #ccc;background:#333;paddin

  • jsp中文显示问号问题解决方法

    问题: jsp中想要输出的中文被显示成"?" 解决方法 : 在eclipse-windows- preferences中 搜索jsp , Encoding选项中选择 Chinese . 这样新建的jsp文件将支持中文显示. 对已经存在的jsp文件做如下修改: 将各种编码方式都改成GB18030,如下: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=GB18030

  • JS输入用户名自动显示邮箱后缀列表的方法

    本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

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

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

    由于某种原因,需要做一个控制grid列显示的checkboxgroup,虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,但是有这样的需求(需要一目了然) 下面先上图 接着前几天做的工作,今天上午完成了定制字段,思路是在上面的普通查询或者高级查询结束以后,获得了列的fields,columns等信息,然后交给一个处理函数 makeCustomMadePanel,该函数用来生成checkboxgroup,生成的时候给它加上一个事件,原本以为checkbox会有类似于check的

  • 使用脚本控制网页Table的显示隐藏(全代码)_AX

    [需求] 如果大家登录过 我傲:http://www.woall.com 新浪博客等 就会发现可以点击栏目标题,就会发现栏目可以展开和收起,非常好用!其实这个功能实现起来很简单.重点就是要找到要隐藏的Table行,对它的display属性进行控制. 强烈建议大家登录:http://www.woall.com亲身体验一下! [另]帖子里网址怎么加链接啊??? [源码]使用方法:把文件考下来,保存为htm类型的文件即可! 无标题文档 你点我啊!! AXzhz制作 [Ctrl+A 全选 注:如需引入外

  • vue实现动态控制表格列的显示隐藏

    vue实现动态控制表格列的显示隐藏

    本文实例为大家分享了vue实现动态控制表格列显示隐藏的具体代码,供大家参考,具体内容如下 一.效果 如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对应列显示和隐藏 二.代码 1.HTML部分 <template>   <div id="app">     <el-table :data="tableData" border style="width: 100%" ref="t

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

  • ExtJS4 动态生成的grid导出为excel示例

    ExtJS4 动态生成的grid导出为excel示例

    搜索了蛮久,找到一些例子,因为我是初学者的缘故大多不知道怎么使用.. 研究了一下那个源码,搞到现在终于实现了基本的下载.解决了一个表格不能重复下载的小BUG,一个使用grid初始化发生的BUG 下面记录一下步骤.说不定下次还有用 1.下载需要用到js代码,我已经上传 2.在你的html文件中加入引用,路径问题自己 注意下,下面是我的路径 复制代码 代码如下: <script type="text/javascript" src="../export/export-all

  • 如何自动生成Mybatis的Mapper文件详解

    如何自动生成Mybatis的Mapper文件详解

    前言 工作中使用mybatis时我们需要根据数据表字段创建pojo类.mapper文件以及dao类,并且需要配置它们之间的依赖关系,这样的工作很琐碎和重复,mybatis官方也发现了这个问题,因此给我们提供了mybatis generator工具来帮我们自动创建pojo类.mapper文件以及dao类并且会帮我们配置好它们的依赖关系. 实际上,最非常流行MyBatis-Plus中内置了代码生成器:采用代码或者 Maven 插件可快速生成 Mapper . Model . Service . Co

  • 如何使用mybatis-generator自动生成代码

    如何使用mybatis-generator自动生成代码

    这篇文章主要介绍了如何使用mybatis-generator自动生成代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.在pom文件中添加mybatis-generator插件 <plugin> <groupId>org.mybatis.generator</groupId> <artifactId>mybatis-generator-maven-plugin</artifactId> &l

  • mybatis-generator自动生成dao、mapping、bean配置操作

    我就废话不多说了,大家还是直接看代码吧~ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-config_

  • 使用Ruby on Rails和PostgreSQL自动生成UUID的教程

    Rails 4 能原生态的支持Postgres 中的UUID(Universally Unique Identifier,可通用的唯一标识符)类型.在此,我将向你描述如何在不用手工修改任何Rails代码的情况下,用它来生成UUID. 首先,你需要激活Postgres的扩展插件'uuid-ossp': class CreateUuidPsqlExtension < ActiveRecord::Migration def self.up execute "CREATE EXTENSION \&

  • 用js实现的一个根据内容自动生成表格的函数

    晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序. 要求是: 1,对于空内容,应该写为"<td> </td>",否则在ie会显示的很变态(ie当作该单元格不存在). 2,当输出数据条数不等于表格的"长X宽"时,用"<td> </td>"自动填补最后一行空余的地方. 其实也很简单,当时做asp时用了一个较复杂的算法(下面代码中MakeTable2),今天又想到一个更容易理解的算法(M

随机推荐