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.         });    

    Ext.onReady(function(){                  var myCheckboxGroup = new Ext.form.CheckboxGroup({                       id:'myGroup',                       xtype: 'checkboxgroup',                       renderTo :'form-cb',                      fieldLabel: 'Single Column',                       itemCls: 'x-check-group-alt',                       columns: 3,                       items: [                           {boxLabel: '唱歌', name: '1'},                           {boxLabel: '游泳', name: '2', checked: true},                           {boxLabel: '看书', name: '3'},                          {boxLabel: '旅游', name: '4'},                          {boxLabel: '游戏', name: '5'},                          {boxLabel: '睡觉', name: '6'}                       ]                   });                                     //CheckboxGroup取值方法                  for (var i = 0; i < myCheckboxGroup.items.length; i++)                  {                      if (myCheckboxGroup.items.itemAt(i).checked)                      {                          alert(myCheckboxGroup.items.itemAt(i).name);                                      }                  }              });  

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. }   

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

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

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. }  

DoctorWorkStation_CommonDoctorAdvice.CreateYZCheckBoxWin = function(store, colnum,title) {      var count = store.getCount();      var myCheckboxItems = [];      for (var i = 0; i < count; i++) {          var boxLabel = store.getAt(i).get("name");          var name = store.getAt(i).get("id");          myCheckboxItems.push({                      boxLabel : boxLabel,                      name : name                  });      }      var myCheckboxGroup = new Ext.form.CheckboxGroup({                  xtype : 'checkboxgroup',                  itemCls : 'x-check-group-alt',                  columns : colnum,                  items : myCheckboxItems              });      var form = new Ext.FormPanel({                  border : true,                  frame : true,                  labelAlign : "right",                  buttonAlign : 'right',                  layout : 'column',                  width : 500,                  items : [myCheckboxGroup],                  buttons : [{                      xtype : 'button',                      text : '确定',                      handler : function() {                          var ids = [];                          var cbitems = myCheckboxGroup.items;                          for (var i = 0; i < cbitems.length; i++) {                              if (cbitems.itemAt(i).checked) {                                  ids.push(cbitems.itemAt(i).name);                              }                          }                          win.destroy();                          if (ids.length) {                              Ext.Msg.alert("消息", "选中状态的id组合字符串为:"                                             + ids.toString());                          }                      }                   }, {                      xtype : 'button',                      text : '取消',                      handler : function() {                          win.destroy();                      }                   }]               });      var win = new Ext.Window({                  modal : true,                  layout : 'fit',                  title : title,                  width : 500,                  height : 300,                  plain : true,                  items : [form]              });      win.show();  }

转自：http://zccst.iteye.com/blog/1243281