[ExtJS강좌 14]트리패널(treepanel) - 두번째 편 ajax type으로 자식노드 뿌리기

자바스크립트이야기/ExtJS

[ExtJS강좌 14]트리패널(treepanel) - 두번째 편 ajax type으로 자식노드 뿌리기

개발로짜 2014. 6. 30. 10:56

지난시간에는 memory타입의 tree를 출력하여봤다!!

ajax 타입이라고 해봤자 proxy설정해주고 서버측으로 부터 json객체를 얻어오기면 하면

memory 타입이랑 변하는건 하나두 없음....

최상단=root 이고, 자식=children이란것은 변함이 없다.

root 속성만 정의하고 ajax로 children을 뽑아보자

1. ExtJS5 세팅

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

2. ExtJS treepanel memory type 샘플예제

2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!!

자바 기준으로 설명할것이라,

spring을 이용하시는 분들은 잭슨라이브러리??로 json을 파싱하시면 될것이고

일반 jsp로 하신다면 json-simple jar 라이브러리를 등록해주자

PHP는 자체제공하는 json함수를 사용하자

json-simple-1.1.1.jar

보통은 트리별로 ajax 호출할때는 선택된 노드의 id를 가지고 db에서 조건을 주어 select를 하여

자식노드를 json으로 파싱하여 클라이언트로 던진다.

이전 포스팅의 root속성중 children key값은 삭제하고 root의 text/id/enpanded속성만 남겨놓자

그리고 children 속성을 json으로 받기위한 proxy 설정을 잡아주자

그러면 변경된 treepanel의 코드는 다음과 같다.

Ext.create('Ext.tree.Panel',{
       		        renderTo : Ext.getBody(),
	       		store : new Ext.data.TreeStore({
	       			root : {
    					text : '최상단 부모노드',
    					id : 1,
    					expanded : false
    				}
	       		    proxy: {
	       		         type: 'ajax',
	       		     	 url : '/treeresult.jsp',
		       		     reader: {
	 			            type: 'json',
	 			            root: 'children'
	 			        }
	       		    },
				})
 })

위의 코드로 root노드를 클릭하게 되면 서버에서는 클릭된 노드의 값을 받아야 한다

request값은 root 속성의 id값이 되면 서버에서 받는 name은 "node"라고 받을 수있다.

즉, 서버에서

java기준 : request.getParameter("node") 라고 하게 되면 서버에서는

rootNode의 id값인 1을 받을 수 있다.

그럼 서버에서 rootNode 클릭시 children json객체를 만드는 소스는 다음과 같다.

       String node = request.getParameter("node");
	JSONObject jsonObj = new JSONObject();
	JSONObject jsonObj2 = null;
	JSONArray jsonArr= new JSONArray();
        //node는 서버에서받은 root의 id값이다.
	if(node.equals("1")) {
                        //임의의 자식노드 json객체 생성후 json array에 답는다.
			for(int i=0; i<5;i++) {
				jsonObj2 = new JSONObject();
				jsonObj2.put("text","자식노드_"+i);
	   			jsonObj2.put("leaf",true);
	   			jsonArr.add(jsonObj2);
			}
                //꼭 children이 아니여도 된다. children으로 준 이유는 proxy -> reader -> root값을 children으로 주었기때문
               //proxy -> reader -> root 값을 하단 key값과 맞춰만 주면 된다.
		jsonObj.put("children", jsonArr);
	}
	PrintWriter pw = response.getWriter();
	System.out.println(jsonObj.toString());
	pw.print(jsonObj);
	pw.flush();
	pw.close();

서버에서 넘어온 json객체구조는 다음과 같다

{
	"children" : [{
				"text" : "자식노드_0",
				"leaf" : true
			}, {
				"text" : "자식노드_1",
				"leaf" : true
			}, {
				"text" : "자식노드_2",
				"leaf" : true
			}, {
				"text" : "자식노드_3",
				"leaf" : true
			}, {
				"text" : "자식노드_4",
				"leaf" : true
			}]
}

위에 구조대로 진행만 해주게 되면 db조회후 자식노드들을 서버에서 뽑아 올 수 있을것이다.

클릭할때마다 서버에서 data를 가져오는것은 아니고 한번만 통신이 이루어진다.

children json속성중 text/leaf만 뽑았는데

작업중인 로직별로 expanded가 붙을수도있고

leaf가 false가 될수도 있고

id가 붙을수도 있다.

나머지는 본인 입맛에 알맞게 적용하시길...