[ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!!

주말에 너무 쉬어서 오늘도 연속으로 포스팅을 하도록 하겠음.

이번에는 트리패널에 대하여 설명하도록 하겠다.

그리드 링크는 별도로 안걸고 세팅에 대한 링크만 걸도록 하겠음

세팅안되신분은 다음 페이지가서 extjs에 대한 세팅을 준비하시고 읽으시길..

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

뭐 사실 GridPanel이랑 별반 차이는 없다.. 

다만 차이가 있다면 store의 타입, json data의 구조정도일듯??

그리드에서는 Ext.data.Store

를 사용하였다면

트리에서는 Ext.data.TreeStore

로 변경이 된다.

그리드도 memory타입으로 스타트를 끊을것이다~~

memory타입으로 시작하려는 이유는 모든 ExtJS의 구조는 json구조가 기본이 되기 때문이다..

뭐 xml로 받을수도 있는거고 jsonp등등 여러타입으로 받을수 있겠지만 본인은 json이 편함 

treeStore에서 필수로 알아야 할 속성은

expanded와 leaf이다

expanded : 자동으로 자식노드를 펼침에 대한 유무를 의미한다 

       true일 경우 : 다음 depth 하위노드를 자동으로 open

       false일 경우 : 본인을 open하여야 다음 depth의 하위노드를 open

leaf : 해당 구조가 최하단인지를 의미

      true일 경우 : +/- 의 아이콘이 보이지 않으며 더이상 하위노드가 없음을 의미한다.

      false일 경우 : +/-의 아이콘을 보여주며 하위노드 존재유무랑 상관없음 하위노드 없을경우 

                         그냥 펼침이 되지만 실질적인 하위노드는 존재하지 않음

그리고 최상단 부모 노드를 default로 표출해야하므로  treeStore에 root 속성을 기술하면 되겠다.

원래는 treestore에 proxy를 설정하고 type을 memory로 해주어도 무관하나

본인은 그냥 root속성만으로 트리구조를 표출하도록 하겠다.

root : {
	text : '최상단 부모노드',
	expanded : true,
	children: 
        [
            {
                text:'자식노드(o)', 
                expanded: false,
                children:
                [
                    {
                        text:'자식노드(o)2', 
                        expanded: true,
                        children:[
                            { 
                                text:'최하단자식1', 
                                leaf:true
                            },
                            { 
                            	text:'최하단자식2', 
                                leaf:true
                            }
                        ]
                    }
                ]
            },
            {
            	text:'자식노드(x)',
            	leaf : true
            }
        ]
}

treeStore의 root 속성에 들어갈 내용이다. 

다음에 설명할 ajax type의 구조도 위 구조에서 크게 벗어나지 않을것이다.

다만 분리를 별도로 할뿐..

memory type은 샘플링으로도 충분할거라 생각한다.

Ext.onReady(function(){
	   //treepanel 생성
	   Ext.create('Ext.tree.Panel',{
		   		//body태그내에 생성한다.
       		    renderTo : Ext.getBody(),
       		    //저장소는 treestore을 이용
	       		store : new Ext.data.TreeStore({
	       			//최상단 rootNode
	       			root : {
	       				// text: 노드의 제목
    					text : '최상단 부모노드',
    					// 자동표출여부
    					expanded : true,
    					// 자식노드
    					children: 
        			        [
        			         	//자식노드 첫번째
        			            {
        			                text:'자식노드(o)',
        			                //자동표출여부
        			                expanded: false,
        			                //자식node
        			                children:
        			                [
        			                 	//자식노드
        			                    {
        			                        text:'자식노드(o)2',
        			                        //더이상의 하위노드는 없다.
        			                        leaf : true
        			                    }
        			                ]
        			            },
        			            //자식노드 두번째
        			            {
        			            	text:'자식노드(x)',
        			            	//더이상의 하위 노드는 없다
        			            	leaf : true
        			            }
        			        ]
    				}
			})
      	}) 	
})

구현된 화면이다.

                  

한번 expanded속성/text속성/leaf속성들을 변경해보고 children속성도 붙여보면서 test하면서 

이해를 해보도록 권유한다.

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!