ExtJS : TreePanel / Tree Store

Extjs : TreePanel / Tree Store 이해

Preview

트리 패널(Tree panel)은 사진처럼 뎁스별로 어떠한 기능을 컴포넌트화/구현하는 데 사용된다.

공식 docs의 설명:

The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to a Ext.data.TreeStore.

TreePanels support multiple columns through the columns configuration.

By default a TreePanel contains a single column which uses the text Field of the store's nodes.

Simple TreePanel using inline data:

기본

트리패널은 Ext.tree.Panel 로 선언하며

xtype alias는 treepanel 이다.

아래 쓰인 expanded 속성은 boolean 값을 value로 가지며

최초 실행했을 때 펼쳐져 있는지를 결정하는 속성이다.

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel',{
    width:500,
    height:500,
    renderTo: Ext.getBody(),
    items:[{
      xtype:'treepanel',
      root:{
        text:'루트패널',
        expanded:false
      }
    }]
  });
});
 

결과

기본적으로 선언하면 결과가 이렇게 우측에 붙어서 나오게 된다. 좌측으로 붙이기 위해서는 약간의 수정이 필요한데

app.json을 열고 Ctrl+F로 rtl을 검색한다.

이부분을

"path": "${framework.dir}/build/ext-all-rtl-debug.js"

이렇게 변경하면

"path": "${framework.dir}/build/ext-all-debug.js"

결과

좌측으로 옮겨진 결과를 확인할 수 있다.

Depth

현재는 +만 있고 클릭해도 아무것도 나오지 않는다.

뎁스를 주기 위해서는 children 속성을 사용하며, children 속성은 json array를 갖는다.

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel',{
    width:500,
    height:500,
    renderTo: Ext.getBody(),
    items:[{
      xtype:'treepanel',
      root:{
        text:'Servers',
        expanded:false,
        children : [{
          text: '.settings'
        },{
          text: 'Tomcat v8.0 Server at localhost-config'
        },{
          text: '.project'
        }]
      }
    }]
  });
});

결과

leaf

.project는 폴더가 아니라 파일이라고 가정하자. 파일이라면 더 이상의 depth가 없으므로 +가 필요없다. 

이파리라는 뜻의 leaf : boolean 속성을 사용해 제어한다. 기본값은 false로, true 를 부여하면 더 이상의 하위값이 없음을 의미한다.

즉 하위값이 있을땐 expanded 속성과 children 속성을, 없을땐 leaf 속성을 사용하면 된다.

아까 선언했던 각 폴더에 파일들을 추가해보자.

{
      xtype:'treepanel',
      root:{
        text:'Servers',
        expanded:false,
        children : [{
          text: '.settings',
          expanded:false,
          children:[{
            text:'org.eclipse.wst.server.core.prefs',
            leaf:true
          }]
        },{
          text: 'Tomcat v8.0 Server at localhost-config',
          expanded: false,
          children:[{
            text:'catalina.policy',
            leaf:true
          },{
            text:'catalina.properties',
            leaf:true
          }]
        },{
          text: '.project',
          leaf: true
        }]
      }
    }

결과

+,- 아이콘이 없어지고, 파일 모양의 아이콘으로 변경되었다.

Tree Store

외부에서 데이터를 가져와 depth를 부여하고 tree를 구성한다.

테스트를 위해 위 코드에서 children 속성의 json array를 떼어다가 tree.json 파일을 만들었다.

tree.json

{
    "children" : [{
    "text": ".settings",
    "expanded":false,
    "children":[{
      "text":"org.eclipse.wst.server.core.prefs",
      "leaf":true
    }]
  },{
    "text": "Tomcat v8.0 Server at localhost-config",
    "expanded": false,
    "children":[{
      "text":"catalina.policy",
      "leaf":true
    },{
      "text":"catalina.properties",
      "leaf":true
    }]
  },{
    "text": ".project",
    "leaf": true
  }]
}

스토어를 이용할 때라도 tree의 root는 따로 가져오지 않으므로 store 안에 선언해준다.

따로 field를 설정하지 않아도 된다.

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel',{
    width:500,
    height:500,
    renderTo: Ext.getBody(),
    items:[{
      xtype:'treepanel',
      store:{
        root:{
          text:'Servers',
          expanded:false
        },
        proxy:{
          type:'ajax',
          url:'/data/tree.json',
          reader:{
            type:'json'
          }
        }
      }
    }]
  });
});

결과

아까와 같은 결과가 나오는 것을 확인할 수 있다.

Ref

http://docs.sencha.com/extjs/6.5.3/classic/Ext.tree.Panel.html