Ext.application({
    name: 'AKApp',
    launch: function () {
        // 設定Viewport
        Ext.create('Ext.container.Viewport', {
            name: 'MainFrame',
            layout: 'border',
            items: [
                Ext.create('Ext.panel.Panel', { // header
                    width: '100%',
                    height: 50,
                    bodyBorder: false,
                    border: false,
                    region: 'north',
                    style: {
                        background: '#739b2e'
                    },
                    html: '<div id="header_content">ExtJSDemo</div>'
                }),
                Ext.create('Ext.tree.Panel', { // menu
                    title: '目錄',
                    id: 'app_tree',
                    rootVisible: false,
                    lines: false,
                    split: true,
                    width: '20%',
                    region: 'west',
                    root: {
                        expanded: true,
                        children: [
                            {
                                text: '業務',
                                expanded: true,
                                children: []
                            },
                            {
                                text: 'Demo',
                                expanded: true,
                                children: [
                                    { text: '建立元件', id: 'Demo.CreateCompareP', leaf: true },
                                    { text: '查詢元件', id: 'Demo.QueryCompareP', leaf: true },
                                ]
                            }
                        ]
                    },
                    listeners: {
                        select: function (thisView, thisControl) {
                            if (thisControl.data.leaf) {
　　　　　　　　　　　　　　　　　　// TODO：點選選單，建立相關的Tab頁
                            }
                        }
                    }
                }),
                Ext.create('Ext.tab.Panel', { // tab
                    id: 'app_tabContainer',
                    region: 'center',
                    autoScroll: true,
                    defaults: {
                        autoScroll: true,
                        bodyPadding: 4,
                        closable: true  //tab頁的關閉按鈕
                    }
                }),
            ]
        });
    }
});