ExtJS6 열다섯번째강의 - ExtJS 6 트리패널 + 트리스토어 알아보기 (ExtJS 6 Learn about tree panel with Tree Store)

▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼

https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ

Tree Panel 적용 후, 트리컴포넌트가 우측에 위치한다면?

생성 된 프로젝트 내부에 보게 되면, app.json 파일이라는 것이 존재합니다.

상세로 들어가신 후, "ext-all-rtl-debug.js"  문구를 검색 후,

rtl 을 제외한 "ext-all-debug.js" 로 파일명을 변경해 주도록 합니다.

그럼, 정상적으로 좌측에 트리패널이 위치하게 될겁니다.

트리패널이란 ?  

트리구조의 데이터를 UI 구조로 제공하는 컴포넌트

트리패널은 store config 속성이 필수로 되어있으므로 

tree panel 선언 시, store config 속성은 필수로 적용해주도록 합니다.

영상에서는 store를 별도로 선언하지 않고, 

외부에다 root 속성과 children 속성을 정의해주었는데,

이와같이 선언해도 무방하나, store 를 이용해주도록 합니다.

트리패널의 store를 별도로 create 선언하지 않으면, Ext.data.Store 클래스가 적용된다 ? No !!

document 문서에서 treepanel을 검색 후, store 속성의 보시면, 

기본적으로Ext.data.TreeStore를 요청하므로 별도로 선언을 해주지 않아도 

트리스토어가 적용됩니다.

트리스토어의 JSON 데이터 구조는 아래 4가지 정의만 해주어도 DEFAULT 화면은 출력됩니다.

① root : 최상단 루트 속성을 정의 후, 하위 속성들은 children 속성으로 정의

            root 의 value 선언은 JSON OBJECT 형태입니다.

② children : 자식 depth 를 선언할 때 사용하는 confg 속성입니다. 

                 root 와는 다르게 JSON ARRAY 형태로 선언해주어야 합니다.

③ expanded : true / false 중 하나로 value 선언

                    true - 컴포넌트 생성과 동시에 ajax 호출이 발생 

                    false - 클릭하여 확장이 될 때 ajax 호출이 발생

④ leaf : true / false 중 하나로 value 선언

   별도로  false는 선언해주지 않아도 무관

   해당 depth의 노드가 마지막일 경우, true값으로 설정을 해주면, 

   더이상 하위노드에 대한 expand 옵션이 적용되지 않아 

   아이콘이 파일아이콘으로 출력이 됩니다.