Ext JS 4.2 트리

Ext.require(['*']);

Ext.onReady(function(){

    var addButton = Ext.create('Ext.Button', {

        text: '노드 추가(Add Node)',

        scale: 'large',

        listeners: {

        el: {

            click: function() {

        var thisNode = Ext.getCmp('xAxisTreeUse').getRootNode().appendChild({

                    "text":"노드 이름(Node name)"

        });

                Ext.getCmp("tree").selectPath(thisNode.getPath());

            }

        }

    });

    var  store = Ext.create('Ext.data.TreeStore', {

            id: 'store',

            proxy: {

            data : data

            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,

        tbar: addButton,

        store: store,

        height: 600,

        renderTo: Ext.get('treeList')

    });

 });

버튼을 클릭하여 노드 추가하고 해당 위치로 이동하는 소스이다

실 작동 URL[http://jsfiddle.net/Kwangheum/T2Vus/]

Ext JS 4.2 트리

1.Ext JS 4.2 트리 기본구조

2.Ext JS 4.2 트리 이름 변경하기

3.Ext Js 4.2 트리 그리드 에디팅

4.Ext JS 4.2 트리 드래그 & 드롭
5.Ext JS 4.2 트리 노드 추가 및 스크롤 이동