【转载】ExtJS根据后台数据动态创建CheckboxGroup的方法

 

转载：http://www.itzhai.com/extjs-based-on-background-data-of-dynamically-created-checkboxgroup-method.html

作者：arthinking

 

 

 

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('信息提示',"加载权限失败");
		}
	}
});