ExtJS实现动态读写Checkboxgroup

最新推荐文章于 2021-02-23 12:25:31 发布

路在脚下2017

最新推荐文章于 2021-02-23 12:25:31 发布

阅读量319

点赞数

分类专栏： ExtJS 文章标签： Ext Ajax同步提交用的文件

本文链接：https://blog.csdn.net/steve_19851023/article/details/84121685

版权

ExtJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这几天，研究了一下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;
	}

以上是我这几天的研究成果。。。呵呵，有什么问题，请留言。

路在脚下2017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS实现动态读写Checkboxgroup

这几天，研究了一下Extjs，做了一个关于Extjs动态创建Checkboxgroup的例子,也参照了网上的一些代码。Web JSP页面代码如下： &lt;%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%&gt;&lt;!DOC...
复制链接

扫一扫

专栏目录