ExtJS 기초강좌 22 - 트리패널 기본구조 이해하기

ExtJS 2015. 6. 24. 08:30

이번 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()
	})
})