Extjs checkboxgroup 取值

版本一
复选框的值都是直接指定。

Php代码  

1. Ext.onReady(function(){    
2.             var myCheckboxGroup = new Ext.form.CheckboxGroup({     
3.                 id:'myGroup',     
4.                 xtype: 'checkboxgroup',     
5.                 renderTo :'form-cb',    
6.                 fieldLabel: 'Single Column',     
7.                 itemCls: 'x-check-group-alt',     
8.                 columns: 3,     
9.                 items: [     
10.                     {boxLabel: '唱歌', name: '1'},     
11.                     {boxLabel: '游泳', name: '2', checked: true},     
12.                     {boxLabel: '看书', name: '3'},    
13.                     {boxLabel: '旅游', name: '4'},    
14.                     {boxLabel: '游戏', name: '5'},    
15.                     {boxLabel: '睡觉', name: '6'}     
16.                 ]     
17.             });     
18.                 
19.             //CheckboxGroup取值方法    
20.             for (var i = 0; i < myCheckboxGroup.items.length; i++)    
21.             {    
22.                 if (myCheckboxGroup.items.itemAt(i).checked)    
23.                 {    
24.                     alert(myCheckboxGroup.items.itemAt(i).name);                    
25.                 }    
26.             }    
27.         });    

Js代码  

1. // 复选框  
2. var myCheckboxGroup = new Ext.form.CheckboxGroup({  
3.     xtype: 'checkboxgroup',  
4.     name: 'model_type',  
5.     width: 80,  //宽度220  
6.     columns: 1,  //在上面定义的宽度上展示3列  
7.     fieldLabel: '机型类型cb',  
8.     items: [  
9.         {boxLabel: '存储机型', name: 'store'},  
10.         {boxLabel: '均衡机型', name: 'average'},  
11.         {boxLabel: '其他机型', name: 'other'}  
12.     ]  
13. });  
14.   
15. // 2，收集复选框的值  
16. var ids = [];  
17. var cbitems = myCheckboxGroup.items;    
18. for (var i = 0; i < cbitems.length; i++) {    
19.     if (cbitems.itemAt(i).checked) {    
20.         ids.push(cbitems.itemAt(i).name);    
21.     }    
22. }  

版本二
复选框的值也可以动态指定

Php代码  

1. DoctorWorkStation_CommonDoctorAdvice.CreateYZCheckBoxWin = function(store, colnum,title) {    
2.     var count = store.getCount();    
3.     var myCheckboxItems = [];    
4.     for (var i = 0; i < count; i++) {    
5.         var boxLabel = store.getAt(i).get("name");    
6.         var name = store.getAt(i).get("id");    
7.         myCheckboxItems.push({    
8.                     boxLabel : boxLabel,    
9.                     name : name    
10.                 });    
11.     }    
12.     var myCheckboxGroup = new Ext.form.CheckboxGroup({    
13.                 xtype : 'checkboxgroup',    
14.                 itemCls : 'x-check-group-alt',    
15.                 columns : colnum,    
16.                 items : myCheckboxItems    
17.             });    
18.     var form = new Ext.FormPanel({    
19.                 border : true,    
20.                 frame : true,    
21.                 labelAlign : "right",    
22.                 buttonAlign : 'right',    
23.                 layout : 'column',    
24.                 width : 500,    
25.                 items : [myCheckboxGroup],    
26.                 buttons : [{    
27.                     xtype : 'button',    
28.                     text : '确定',    
29.                     handler : function() {    
30.                         var ids = [];    
31.                         var cbitems = myCheckboxGroup.items;    
32.                         for (var i = 0; i < cbitems.length; i++) {    
33.                             if (cbitems.itemAt(i).checked) {    
34.                                 ids.push(cbitems.itemAt(i).name);    
35.                             }    
36.                         }    
37.                         win.destroy();    
38.                         if (ids.length) {    
39.                             Ext.Msg.alert("消息", "选中状态的id组合字符串为:"   
40.                                             + ids.toString());    
41.                         }    
42.                     }    
43.    
44.                 }, {    
45.                     xtype : 'button',    
46.                     text : '取消',    
47.                     handler : function() {    
48.                         win.destroy();    
49.                     }    
50.    
51.                 }]    
52.    
53.             });    
54.     var win = new Ext.Window({    
55.                 modal : true,    
56.                 layout : 'fit',    
57.                 title : title,    
58.                 width : 500,    
59.                 height : 300,    
60.                 plain : true,    
61.                 items : [form]    
62.             });    
63.     win.show();    
64.   
65. }