日期:2014-05-16  浏览次数:20441 次

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);