| 标题 | 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地开销非常大，变为一次速度真地提升了很多很多~ |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。