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

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

前台controller代码：

1. Ext.define('zyc.controller.Filter', {
2. extend: 'Ext.app.Controller',
3. init:function(){
4. this.control({
5. 'filterpanel':{
6. render:function(view,opts){
7. Ext.Ajax.request({
8. url:'user!getForm.action',
9. success:function(response,o){
10. var forms=eval('('+response.responseText+')');
11. var checkboxgroups=forms[0].checkboxgroup;//获得所有的checkboxgroup
12. var radiogroups=forms[0].radiogroup;//获得所有的radiogroup
13. var cbgCount=checkboxgroups.length;
14. var rdoCount=radiogroups.length;
15. if(toolBar==null){
16. view.add({
17. xtype:'toolbar',
18. name: 'name'
19. });
20. }
21. for(i=0;i<cbgCount;i++){
22. var checkboxgroup=checkboxgroups[i];//获得单独一个checkboxgroup对象
23. var checkboxs=checkboxgroup.checkBox;
24. var fieldLabelValue=checkboxgroup.fieldLabel;
25. var cbgName=checkboxgroup.cbgName;
26. console.debug(fieldLabelValue);
27. var newCheckBoxs=new Array();
28. for(var j=0;j<checkboxs.length;j++){
29. newCheckBoxs.push(
30. Ext.form.Checkbox({
31. boxLabel: checkboxs[j].boxLabel,
32. inputValue: checkboxs[j].inputValue,
33. checked: checkboxs[j].checked,
34. name: checkboxs[j].name,
35. labelWidth:230,
36. width:80
37. })
38. );
39. }
40. var toolBar=view.down('toolbar');
41. toolBar.hide();
42. view.add({
43. xtype:'checkboxgroup',
44. name: cbgName,
45. columns: 5,
46. vertical: true,
47. fieldLabel: fieldLabelValue,
48. items:newCheckBoxs,
49. listeners:{
50. change:function(f ,newValue,oldValue,o){
51. var self=this;
52. var checkeds=f.getChecked();
53. var allCBG=Ext.ComponentQuery.query('checkboxgroup')//获得所有
54. var allCheckedCount=0;//由于页面有多个checkboxgroup，所有要找出所有被选择的数量
55. Ext.each(allCBG,function(Cbg){
56. if(Cbg.getChecked().length>0){
57. allCheckedCount=Cbg.getChecked().length;
58. }
59. })
60. console.debug(self);
61. var cgButtonObj=toolBar.down('button[ref='+self.name+']');//获得被单击的cb按钮对象
62. // console.debug(oldValue);
63. if(checkeds.length>0){
64. var checkValues=[];
65. for(i=0;i<checkeds.length;i++){
66. checkValues.unshift(checkeds[i].inputValue)
67. }
68. // console.debug(checkValues)
69. if(toolBar.isHidden()){
70. toolBar.show();
71. cgButtonObj.show();
72. }
73. if(cgButtonObj.isHidden()){
74. cgButtonObj.show();
75. }
76. cgButtonObj.setText('所选'+self.name+'：'+checkValues);
77. cgButtonObj.setTooltip (checkValues);
78. cgButtonObj.setIconCls ('icon-stat');
79. }
80. else {
81. cgButtonObj.hide();
82. }
83. if(allCheckedCount<=0){
84. toolBar.hide();
85. }
86. },
87. afterrender:function(view, eOpts ){
88. var tooButton=new Ext.button.Button({
89. ref:cbgName,
90. maxWidth :200,
91. shadow:'drop '
92. });
93. //console.debug(tooButton);
94. toolBar.add(tooButton);
95. tooButton.on('mouseover',function(){
96. tooButton.setIconCls('icon-delete');
97. },this);
98. tooButton.on('mouseout',function(){
99. tooButton.setIconCls('icon-edit');
100. },this);
101. tooButton.on('click',function(){
102. var checkeds=view.getChecked();
103. view.items.each(function(item) {
104. item.setValue(false);
105. });
106. },this)
107. }
108. }
109. });
110. //newCheckBoxs=null;
111. }
112. },
113. failure:function(response,o){
114. console.debug('fail');
115. }
116. })
117. }
118. }
119. });
120. },
121. views:[
122. 'filter.FilterPanel'
123. ],
124. stores :[
125. ],
126. models :[
127. ]
128. });

后天返回的数据：

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

简单代码下载：

效果图