【转载】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()方法:
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后,就需要执行此函数。
Javascript手册,ExtJS API文档
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('信息提示',"加载权限失败"); } } });
上一篇: 求大神指点伪静态正则.