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

转载自：http://blog.csdn.net/zhengyuechuan/article/details/9327291

前台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":[]}]

简单代码下载：

 

效果图