이번 ExtJS 강좌는 트리에 대해서 간략하게 진행하겠습니다.

    트리패널은 이전 그리드패널에 사용했던 Ext.data.Store 저장소대신, Ext.data.TreeStore 저장소를 이용해야 합니다.

    트리패널을 출력하기 전, 제일먼저 알아두어야 할 것이 트리의 데이터구조에 대해서 알아야 합니다.

    계층형구조로 화면에 출력이 되는것이니, 데이터 구조 또한 계층형으로 정의되어야 하겠습니다.

    아래 샘플구조에 대해서 알아보도록 하겠습니다. ▼



    위처럼 JSON 구조가 계층형으로 작성되어있습니다.

    그럼 각 JSON Key값에 대한 설명은 아래와 같습니다.

    text - 해당위치 depth에 표출되어지는 각 노드의 타이틀

    expanded - 자식노드를 open하기 위한 boolean 형식의 값(true/false)

    expanded : true는 autoLoad 와 동일한 기능이니, 데이터가 클경우를 대비해서 false로 주는것을 추천함

    children - 자식노드가 1개 이상일 경우, children key로 JSON Array형식의 구조로 자식노드목록을 정의

    leaf - 각 노드의 자식노드가 더이상 존재하지 않고 마지막 depth일 경우 leaf :true 를 주어야 함

    상단에 설명한 4가지가 트리패널을 출력시켜주는 대표적인 config 속성입니다.

    샘플코드를 작성 후, 실행을 해보도록 하겠습니다.


    샘플코드

    
    Ext.onReady(function(){
    	Ext.create('Ext.tree.Panel',{
    		width : 500,
    		height : 800,
    		title : 'Tree Example',
    		store : Ext.create('Ext.data.TreeStore',{
    			 root : {
    				    text: '몽고소프트',
    				    expanded: true,
    				    children: [
    						{ 
    							leaf:true, 
    							text: '대표-세종대왕' 
    						},{
    				            text: '경영지원팀',
    				            expanded: true,
    				            children: [{ 
    			                		leaf:true, 
    			                		text: '부장-홍길동' 
    		                		}]
    				        },{
    				            text: '기획팀',
    				            expanded: true,
    				            children: [{ 
    				            		leaf:true, 
    				            		text: '차장-이순신' 
    			            		},{ 
    		            				leaf:true, 
    		            				text: '과장-장영실' 
    	            				}]
    				        },{
    				            text: '개발팀',
    				            expanded: false,
    				            children: [{ 
    			                		leaf:true, 
    			                		text: '부장-스티브잡스' 
    		                		},{ 
    	                				leaf:true, 
    	                				text: '차장-빌게이츠' 
                    				},{ 
                  						leaf:true, 
                  						text: '대리-주커버크' 
                 						},{ 
                 							leaf:true, 
                 							text: '사원-몽고' 
               						}]
    				        }
    				    ]
    				}
    		}),
    		renderTo : Ext.getBody()
    	})
    })
    
    

    실행결과



    예를 간단하게 부서 → 직원형태로하여 샘플링을 해보았습니다.

    코드를 보시면, 최하단 자식노드에 leaf : true를 준 것을 확인 할 수 있습니다.

    왜냐하면 leaf config를 정의하지 않게 된다면 불필요한 load를 한번더 진행이 될 수 있기 때문입니다.


    트리스토어에서 JSON 데이터를 트리형태로 표출하기 위해서는 'root' config 속성을 이용하여 JSON 데이터를 적용하면 되겠습니다.

    다음장은 트리의 자식 노드들을 비동기방식(Ajax)을 이용하여 서버페이지로부터 받아온 데이터들을 이용하여 출력시켜보도록 하겠습니다.




    Posted by 몽고