Extjs4学习笔记（五）------checkboxgroup插件从后台获得数据，一键全选

checkboxgroup插件从后台获得数据，一键全选

checkboxgroup官网定义：一个表单项容器，它使用一个特殊的列布局来安排Ext.form.field.Checkbox， 并对checkbox按钮组的getting, setting和validating提供方便的Ext.form.field.Field方法。
checkboxgroup存在验证行为，通过设置配置allowBlank:false来实现这个功能。
实现后台数据动态生成checkbox
listeners监听事件自定义一个方法。

xtype:'checkboxgroup',fieldLabel: '值      别',id:'zhibieGroup',name:'zhibieGroup',labelWidth: 60,columns: 10,vertical: false,items:[{     boxLabel: '全选' ,checked:true,    listeners:{             'change':function(obj,isChecked){                    changeState(obj,isChecked);             }          }   }]

 function changeState(obj,isChecked){    var array = obj.up("checkboxgroup").items;    if(isChecked){        //全选            array.each(function(item){              item.setValue(true);              });      }else{        //全不选            array.each(function(item){              item.setValue(false);          });     } }

此方法实现全选功能。obj为传递的对象，根据此对象来判断要接受的数据。

 function loadZhiBieBox(){    Ext.Ajax.request({                url : '../dqgzEdit/getZhiBieList.action',                method : 'post',                success : function(response, options) {                    var result=eval("("+response.responseText+")");                    var len=result.length;                    var checkboxgroup = Ext.getCmp("zhibieGroup");                    for (var i = 0; i < len; i++) {                        var checkbox = new Ext.form.Checkbox(                          {                              boxLabel: result[i].CODE_DESC,//obj.Table[i].Title; "Title"指的是返回的名字                              name: 'zhibie',                              inputValue: result[i].CODE_VALUE,                              checked: true                          });                        checkboxgroup.items.add(checkbox);                    }                    Ext.getCmp("zhibieGroup").doLayout(); //重新调整版面布局                  },                failure : function() {                    Ext.Msg.alert("提示", "删除失败！");                    }            });}

效果图