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

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

前台controller代码：

[javascript] view plaincopyprint?

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 :[

]

});

后天返回的数据：

[java] view plaincopyprint?

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

简单代码下载：

效果图