转载: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('信息提示',"加载权限失败");
}
}
});
分享到:
相关推荐
extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台
NULL 博文链接:https://stevelee.iteye.com/blog/1328992
Extjs checkboxgrop动态获取后台数据,并默认为全选状态
Extjs3.0中的CheckboxGroup默认不能动态添加item,如需要数据动态创建,试着创建整个CheckboxGroup,而不是动态添加item,具体实现如下,感兴趣的朋友可以了解下
checkboxgroup中修改时赋值是最难解决的,要改写方法才能实现
Extjs4后台框架
已经整理,能直接看效果的哦,用着不错,要使用的拿走吧
自己动手搭extjs4.0.7后台管理框架,动态树+动态多标签
extjs通用后台管理界面 非常的好看,打击可以下载参考一下 也可以在项目中应用
ExtJs4 Checkbox tree
extjs动态表格实例(封装GRID,从STRUTS2读取后台数据 )
13款extjs经典后台框架.总有一款适合你。本人精心积累,5点积分不算多。
EXTJS AJAX方式发送数据给后台服务器
ASP.Net+ExtJS做的后台 可以学习学习
checkbox tree extjs2checkbox tree extjs2checkbox tree extjs2checkbox tree extjs2
Extjs (Tree+Tab+Grid)通用后台模板,全静态数据,下载即可看效果。可以完全套用。
Extjs4 表单从数据库读取数据映射到对应的字段中显示
重写 代码如下: //解决checkboxgroup回填数据问题 Ext.override(Ext.form.BasicForm,{ findField : function(id){ var field = this.items.get(id); if(!field){ this.items.each(function(f){ if(f.isXType(...
extjs 富客户端界面设计 grid分页后台处理