ExtJS 동적 읽기 및 쓰기 Checkbox group 구현

요 며칠 동안 Extjs를 연구했고 Extjs의 동적 생성 체크박스 그룹에 대한 예를 만들었고 인터넷의 코드도 참조했다.웹 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;
	}

이상은 제가 요 며칠 동안 연구한 성과입니다...허허, 무슨 문제가 있으면 메시지를 남겨 주세요.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ExtJS 동적 읽기 및 쓰기 Checkbox group 구현

좋은 웹페이지 즐겨찾기