ext4.1动态生成多个checkboxgroup（或者radiogroup），并且有toolbar操作、

前台controller代码：

Ext.define('zyc.controller.Filter', {    extend: 'Ext.app.Controller',init:function(){this.control({ 'filterpanel':{     render:function(view,opts){     Ext.Ajax.request({           url:'user!getForm.action',           success:function(response,o){                 var forms=eval('('+response.responseText+')');           var checkboxgroups=forms[0].checkboxgroup;//获得所有的checkboxgroup           var radiogroups=forms[0].radiogroup;//获得所有的radiogroup           var cbgCount=checkboxgroups.length;           var rdoCount=radiogroups.length;           if(toolBar==null){        view.add({   xtype:'toolbar',   name: 'name'   });            }           for(i=0;i<cbgCount;i++){                 var checkboxgroup=checkboxgroups[i];//获得单独一个checkboxgroup对象                 var checkboxs=checkboxgroup.checkBox;                 var fieldLabelValue=checkboxgroup.fieldLabel;                 var cbgName=checkboxgroup.cbgName;                 console.debug(fieldLabelValue);                 var newCheckBoxs=new Array();               for(var j=0;j<checkboxs.length;j++){                    newCheckBoxs.push(                    Ext.form.Checkbox({                         boxLabel: checkboxs[j].boxLabel,                        inputValue: checkboxs[j].inputValue,                        checked: checkboxs[j].checked,                       name: checkboxs[j].name,                       labelWidth:230,                       width:80                    })                    );               }           var toolBar=view.down('toolbar');           toolBar.hide();                 view.add({              xtype:'checkboxgroup',              name: cbgName,              columns: 5,                                           vertical: true,                               fieldLabel: fieldLabelValue,                               items:newCheckBoxs,                                    listeners:{                   change:function(f ,newValue,oldValue,o){                     var self=this;                       var checkeds=f.getChecked();                       var allCBG=Ext.ComponentQuery.query('checkboxgroup')//获得所有                       var allCheckedCount=0;//由于页面有多个checkboxgroup，所有要找出所有被选择的数量                       Ext.each(allCBG,function(Cbg){                             if(Cbg.getChecked().length>0){                             allCheckedCount=Cbg.getChecked().length;                             }                       })                       console.debug(self);                       var cgButtonObj=toolBar.down('button[ref='+self.name+']');//获得被单击的cb按钮对象                       // console.debug(oldValue);                       if(checkeds.length>0){                          var checkValues=[];                          for(i=0;i<checkeds.length;i++){                            checkValues.unshift(checkeds[i].inputValue)                          }                         // console.debug(checkValues)                          if(toolBar.isHidden()){                              toolBar.show();                              cgButtonObj.show();                          }                          if(cgButtonObj.isHidden()){                              cgButtonObj.show();                          }                           cgButtonObj.setText('所选'+self.name+'：'+checkValues);                           cgButtonObj.setTooltip (checkValues);                           cgButtonObj.setIconCls ('icon-stat');                       }                       else {                           cgButtonObj.hide();                       }                       if(allCheckedCount<=0){                           toolBar.hide();                       }                                       },                   afterrender:function(view, eOpts ){                       var tooButton=new Ext.button.Button({                           ref:cbgName,                           maxWidth :200,                           shadow:'drop '                       });                       //console.debug(tooButton);                       toolBar.add(tooButton);                       tooButton.on('mouseover',function(){                           tooButton.setIconCls('icon-delete');                    },this);                    tooButton.on('mouseout',function(){                           tooButton.setIconCls('icon-edit');                    },this);                    tooButton.on('click',function(){                           var checkeds=view.getChecked();                              view.items.each(function(item) {                                                     item.setValue(false);                                                 });                    },this)                   }             }                 });                 //newCheckBoxs=null;                            }                                 },           failure:function(response,o){                            console.debug('fail');}     })     } }});},views:['filter.FilterPanel'],stores :[],models :[] });

后天返回的数据：

[{"checkboxgroup":[{"cbgName":"dept","checkBox":[{"boxLabel":"销售部","checked":false,"id":1,"inputValue":"销售部","name":"dept"},{"boxLabel":"技术部","checked":false,"id":2,"inputValue":"技术部","name":"dept"},{"boxLabel":"普通部","checked":false,"id":3,"inputValue":"普通部","name":"dept"},{"boxLabel":"资源部","checked":false,"id":4,"inputValue":"资源部","name":"dept"},{"boxLabel":"后勤部","checked":false,"id":5,"inputValue":"后勤部","name":"dept"},{"boxLabel":"行政部","checked":false,"id":6,"inputValue":"行政部","name":"dept"},{"boxLabel":"管理部","checked":false,"id":7,"inputValue":"管理部","name":"dept"},{"boxLabel":"体育部","checked":false,"id":8,"inputValue":"体育部","name":"dept"},{"boxLabel":"劳动部","checked":false,"id":9,"inputValue":"劳动部","name":"dept"},{"boxLabel":"策划部","checked":false,"id":10,"inputValue":"策划部","name":"dept"}],"fieldLabel":"部门选择"},{"cbgName":"user","checkBox":[{"boxLabel":"郑一","checked":false,"id":1,"inputValue":"郑一","name":"user"},{"boxLabel":"陈二","checked":false,"id":2,"inputValue":"陈二","name":"user"},{"boxLabel":"张三","checked":false,"id":3,"inputValue":"张三","name":"user"},{"boxLabel":"李四","checked":false,"id":4,"inputValue":"李四","name":"user"},{"boxLabel":"王五","checked":false,"id":5,"inputValue":"王五","name":"user"},{"boxLabel":"赵六","checked":false,"id":6,"inputValue":"赵六","name":"user"},{"boxLabel":"林七","checked":false,"id":7,"inputValue":"林七","name":"user"},{"boxLabel":"孙八","checked":false,"id":8,"inputValue":"孙八","name":"user"},{"boxLabel":"吴九","checked":false,"id":9,"inputValue":"吴九","name":"user"},{"boxLabel":"蔡十","checked":false,"id":10,"inputValue":"蔡十","name":"user"}],"fieldLabel":"用户选择"}],"radiogroup":[]}]

简单代码下载：

效果图