Sencha Ext.tree.Panel(Classic)

# tree 소스
Ext.define('Home.view.menu.LeftMenu', {
    extend: 'Ext.tree.Panel',
    // alias 정의 없이 다른 곳에서 'leftmenu'로 찾으면 아래와 같은 에러 발생
    // Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.leftmenu
    alias: 'widget.leftmenu',
    controller: 'leftmenu',

    width: 200,
    title: '메뉴',
    // root 보이지 않도록 설정
    rootVisible: false,
    // name 필드를 출력되도록 설정
    displayField: 'name',
    store: {
    	// type은 아직 모르겠음
        type: 'tree',
        // json에서 가져올 field 정의
        fields: ['name', 'url'],
        proxy: {
            type: 'ajax',
            url: Ext.Boot.baseUrl + 'resources/json/menu/menu.json',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true
    },
    listeners: {
    	// 화면 구성시 바로 펼쳐지도록 설정
        afterrender: function(treePanel) {
            treePanel.expandAll();
        },
        itemclick: 'onMenuClick'
    }
})

# menu.json
# json 구조가 맞지 않으면 로딩 표시만 잠깐 되고, 화면에 tree가 안나옴
# leaf 정의를 꼭해줘야 함
{
    "children": [
        {"name": "화면", "url": "", "leaf": false,
            "children": [
                {"name": "화면1-1", "url": "Home.view.main.List", "leaf": true},
                {"name": "화면1-2", "url": "Home.view.cust.CustInfo", "leaf": true},
                {"name": "화면1-3", "url": "Home.view.cust.CustInfo", "leaf": true}
            ]
        },
        {"name": "화면2", "url": "", "leaf": true}
    ]
}