extjs checkboxGroup 复选框的用法
extjs checkboxGroup 复选框的用法在extjs中，为便于功能实现，通常会使用到checkboxgroup以及radiogroup的控件，在实际使用中，如何获取或设置该控件的值？下面通过实例介绍一下。
<script type="text/javascript">
Ext.onReady(function() {
new Ext.form.FormPanel({
title:'CheckboxGroup黑人RadioGroup组件示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame:true,
height:120,
width:270,
renderTo:Ext.getBody(),
defaults:{//统一设置表单字段默认属性
labelSeparator:'：',//分隔符
labelWidth:50,//标签宽度
width:200,//字段宽度
labelAlign:'left'//标签对齐方式
},
items:[{
xtype:'radiogroup',
fieldLabel:'性别',
columns:2,//2列
items:[
{boxLabel:'男',name:'sex',inputValue:'male'},
{boxLabel:'女',name:'sex',inputValue:'female'}
]
},{
xtype:'checkboxgroup',
fieldLabel:'爱好',
columns:3,//3列
items:[
{boxLabel:'游泳',name:'swim'},
{boxLabel:'散步',name:'walk'},
{boxLabel:'阅读',name:'read'},
{boxLabel:'游戏',name:'game'},
{boxLabel:'电影',name:'movie'}
]
}]
});
});
</script>
效果图：
取值
如何获取这个checkboxgroup值，查看API，getValue返回时对象形成的数组，为获取该值，通过一下代码：
var FileItype=showserach.getForm().findField('FileItype').getValue();
var s='';
for(i=0;i<FileItype.length;i++)
{s=s+','+FileItype[i].inputValue}
ds.baseParams={FileItype:s.substr(1)};
传递至后台，以字符串的方式进行:
根据后台数据动态创建CheckboxGroup
提示：
ExtJS中的CheckboxGroup（和RadioGroup）默认不能动态添加item。虽然它继承了Ext.form.Field，但是却类似于容器。
在CheckboxGroup构造是，它会将配置中的items等配置项处理生成一个对应的panel，该处理过程只有一次，所以很难对CheckboxGroup进行动态修改。
如果需要根据后台数据动态创建的话，最好试着创建整个CheckboxGroup，而不是动态添加item。
实现代码：
Ext.Ajax.request({
url: 获取动态数据的URL,
callback: function(options,success,response){
if(success = true){
var obj = eval( "(" + response.responseText + ")" );
//拼接checkbox子项目
var checkboxitems="";
for(var i = 0;i<obj.groups.length;i++){
if(checkboxitems!="")
checkboxitems+=",";
else
checkboxitems+="[";
var groupid = obj.groups[i].groupid;
var checkboxSingleItem = "{boxLabel:'"+obj.groups[i].groupname+"',name:'"+obj.groups[i].groupname+"',id:'"+obj.groups[i].groupid+"',inputValue:'"+obj.groups[i].groupid+"'";
var usergroup=obj.usergroups;
for(var j=0;j<usergroup.length;j++){
if(usergroup[j].groupid == groupid){
checkboxSingleItem += ",checked:'true'";
}
}
checkboxSingleItem+="}";
checkboxitems+=checkboxSingleItem;
}
checkboxitems+="]";
var itemsGroup = new Ext.form.CheckboxGroup({
fieldLabel: '选择权限',
name:'user_add_checkboxgroup',
width:380,
id:'user_add_checkboxgroup',
columns: 1,
name:'items',
width:360,
columns:1,
items:eval(checkboxitems)
});
addFormPanel.add(itemsGroup);
addFormPanel.doLayout();
} else {
Ext.MessageBox.alert('信息提示',"加载权限失败");
}
}
});