ExtJS根据后台数据动态创建CheckboxGroup的方法
本文由发表于6年前 | Javascript | 评论数 2 |  被围观 17,331 views+
技能修炼:1、准备知识:2、备用工具:3、提示:4、下面是一个根据后台数据动态创建CheckboxGroup的例子:
技能修炼:

编写一个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('信息提示',"加载权限失败");
		}
	}
});
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/extjs-based-on-background-data-of-dynamically-created-checkboxgroup-method.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 10/2
文章评论
    2条评论
  1. D-day 2013年01月08日14:48:52  #-49楼 回复 回复

    大神,有Java的后台代码吗? 后台应该咋弄?捉急啊 实在是。

    • arthinking 2013年01月11日23:09:26 回复 回复

      后台可以通过查找数据,返回JSON格式的数据:{groupname:’部门查看’,groupid:’department-view’}
      可以使用json-lib或者GSON把Java对象转换成JSON对象,根据返回的JSON对象的数据在前端拼装成Checkbox组件

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Java笔记 – 泛型 泛型方法 泛型接口 擦除 边界 通配符(1) 2014/3/16
2 JSF笔记 – JSF中的EL表达式语言支持 2011/12/2
3 org.hibernate.LazyInitializationException的解决方法 使用OpenSessionInViewFilter 2011/7/31
4 Hibernate笔记 – Hibernate的相关帮助文档和在线学习资料 2011/7/16
5 Java笔记 – 不可变的String对象 使用StringBuffer与使用”+”连接字符串JVM的处理方式的区别 2013/12/12
6 【转】纳森·弗莱切:被遗忘的“搜索引擎之父” 2013/9/6
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.