ext js 4.2 basic tree

가장 기본 옵션

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<div id="treeList"></div>

JavaScript

Ext.require(['*']);
Ext.onReady(function(){
    var  store = Ext.create('Ext.data.TreeStore', {
            id: 'store',
            proxy: {
            data : 
            [{
                "id": 1,
                "text": "페이지1",
                "leaf": true,
                "expanded": true
            }, {
                "id": 2,
                "text": "test2",
                "leaf": true,
                "expanded": true
            }, {
                "id": 3,
                "text": "페이지3",
                "leaf": true,
                "expanded": true
            }, {
                "id": 4,
                "text": "페이지4",
                "leaf": true,
                "expanded": true
            }, {
                "id": 5,
                "text": "페이지5",
                "leaf": true,
                "expanded": true
            }, {
                "id": 6,
                "text": "페이지6",
                "leaf": true,
                "expanded": true
            }, {
                "id": 7,
                "text": "페이지7",
                "leaf": true,
                "expanded": true
            }, {
                "id": 8,
                "text": "페이지8",
                "leaf": true,
                "expanded": true
            }],
            type:'memory',
            reader:{
                type:'json'
            }
        },
        root: {
            text: "ROOT",
            id: "ROOT",
            expanded: true
        }
    });
    var tree = Ext.create('Ext.tree.Panel', {
        id: 'tree',
        rootVisible: true,
        multiSelect: false,
        store: store,
        height: 600,
        renderTo: Ext.get('treeList')
    });

 });