ExtJS实现动态读写Checkboxgroup
?? ?
?? 这几天，研究了一下Extjs，做了一个关于Extjs动态创建Checkboxgroup的例子,也参照了网上的一些代码。Web JSP页面代码如下：
??
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/><script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../extjs/ext-all.js"></script><script type="text/javascript" src="../extjs/ext-basex.js"></script><script type="text/javascript">Ext.onReady(function(){var MyCheckboxGroup=Ext.extend(Ext.form.CheckboxGroup,{ columns:4, dataUrl:'', //数据地址 labelFiled:'label', valueFiled:'value', setValue:function(val){ alert(val); if(val.split){ val=val.split(','); } this.reset(); for(var i=0;i <val.length;i++){ this.items.each(function(c){ //debugger; if(c.inputValue==val[i]){ c.setValue(true); } }); } }, reset:function(){ this.items.each(function(c){ c.setValue(false); }); }, getValue:function(){ var val=[]; this.items.each(function(c){ if(c.getValue()==true) val.push(c.inputValue); }); return val.join(','); }, onRender:function(ct, position){ var items=[]; if(!this.items){ /* Ext.Ajax.request({ url:this.dataUrl, scope:this, async:false, success: function(resp,opts) { var respText = Ext.util.JSON.decode(resp.responseText); for(var i=0;i <respText.totalCount;i++){ var d=respText.records[i]; var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue}; items.push(chk); } } }); */ /** //传统AJAX var obj; if (window.ActiveXObject) { obj = new ActiveXObject('Microsoft.XMLHTTP'); } else if (window.XMLHttpRequest) { obj = new XMLHttpRequest(); } obj.open('GET', this.dataUrl, false); obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); obj.send(null); var respText = Ext.util.JSON.decode(obj.responseText); for(var i=0;i <respText.totalCount;i++){ var d=respText.records[i]; var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue}; items.push(chk); } */ /*Ext Ajax*/ var conn = Ext.lib.Ajax.getConnectionObject().conn; conn.open("get", this.dataUrl,false); conn.send(null); // 成功状态码为200 if (conn.status == "200") { var respText = Ext.util.JSON.decode(conn.responseText); for(var i=0;i <respText.totalCount;i++){ var d=respText.records[i]; var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue,checked:d.check}; items.push(chk); } } this.items=items; } MyCheckboxGroup.superclass.onRender.call(this, ct, position); } }); Ext.reg('mycheckgroup',MyCheckboxGroup); var mycc=new MyCheckboxGroup({ fieldLabel: 'Auto Layout', name: 'cb-custwidth', dataUrl:'<%=request.getContextPath()%>/User_userRole'}); var chk=new Ext.form.FormPanel({ renderTo:'form', frame:true, items:[ mycc ] }); //mycc.setValue('SYSADMIN,CUSTOMERSERVICE');//设值});</script></head><body> <div id="form"></div></body></html>?? 后台我用的是Struts2，代码如下：
?
?????
public class UserAction extends ActionSupport {private HttpSession session;private HttpServletRequest request;private HttpServletResponse response;private String name;private String pwd; //密码private String privs;//权限private int id;private String userrole;/** * 获得用户权限Action * @return */public String userRole(){PrintWriter out=null;response.setContentType("text/html;charset=GBK");UserService uservice=new UserService();try {out=response.getWriter();} catch (IOException e) {e.printStackTrace();}List<UserRole> list=uservice.getAllRole();JSONArray obj=JSONArray.fromObject(list);String res = new StringBuffer().append("{"totalCount":").append(""").append(list.size()).append("",").append(""records":").append(obj.toString()).append("}").toString();out.println(res);System.out.println(res);return null;}}
?
?
? 以上是我这几天的研究成果。。。 呵呵，有什么问题，请留言。
?
????
1 楼 stephansun 2012-06-27 请问，如果要reload数据怎么办？谢谢！