ExtJS根据后台数据动态创建CheckboxGroup的方法

发表于 2011-10-02 更新于 2020-09-20 分类于 Javascript

技能修炼：

编写一个ExtJS根据后台数据动态创建CheckboxGroup的例子。

1、准备知识：

★Ext的Ajax请求的编写

Ext.Ajax.request({
url: '',
callback: function(options,success,response){
if(success = true){
response.responseText; //可由后台获取JSON格式数据进行解析
}else{
}
}
});

★JSON格式数据的组装和读取 参考：Javascript解析由服务器返回的JSON格式数据 ★CheckboxGroup的基本编写方法（checkbox的构造和拼接） {boxLabel:'部门查看',name:'department-view',id:'department-view',inputValue:'department-view'} ★将字符串转换为Javascript语句的函数：eval() ★**Ext.form.FormPanel的add()方法：添加组件 ★Ext.form.FormPanel的doLayout()方法：**重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。

2、备用工具：

Javascript手册，ExtJS API文档

3、提示：

ExtJS中的CheckboxGroup（和RadioGroup）默认不能动态添加item。虽然它继承了Ext.form.Field，但是却类似于容器。

在CheckboxGroup构造是，它会将配置中的items等配置项处理生成一个对应的panel，该处理过程只有一次，所以很难对CheckboxGroup进行动态修改。

如果需要根据后台数据动态创建的话，最好试着创建整个CheckboxGroup，而不是动态添加item。

4、下面是一个根据后台数据动态创建CheckboxGroup的例子：

Ext.Ajax.request({
url: 'control/privilege/EmployeeManage-privilegeGroupSetUI.action?username='+ username,
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;
// alert(obj.groups[i].name);
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++){

// alert();
if(usergroup[j].groupid == groupid){
checkboxSingleItem += ",checked:'true'";
}
}
checkboxSingleItem+="}";
// alert(checkboxSingleItem);
checkboxitems+=checkboxSingleItem;
}
checkboxitems+="]";
// alert(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('信息提示',"加载权限失败");
	}
}

});