ExtJS布局：制作后台管理布局

一個后台管理頁面大概頭部、左側導航、右側的在線用戶（可有可無）和狀態欄（不是必須）

頭部一般放一些logo、登陸用戶信息和提醒事項等

我上面給出的這個圖片就是我用ExtJS實現的一個后台管理頁面布局，源代碼如下：

Ext.onReady(function () {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Logo</h1>',
            border: false,
            height: 50,
            margins: '0 0 0 0'
        }, {
            region: 'west',
            collapsible: true,
            split: true,
            id: 'MainMenu',
            title: '系統導航',
            width: 150,
            layout: 'accordion',
            items: [
                {
                    title: '系統菜單',
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'treepanel',
                            border: 0,
                            rootVisible: false,
                            root: {
                                expanded: true,
                                children: [
                                    { id: "01", text: "用戶管理", leaf: true, href: '#' },
                                    { id: "02", text: "密碼修改", leaf: true, href: '#' }
                                ]
                            }
                        }
                    ]
                },
            ]
            // could use a TreePanel or AccordionLayout for navigational items
        }, {
            region: 'south',
            collapsible: false,
            html: '狀態欄',
            split: false,
            height: 22
        }, {
            region: 'east',
            title: '在線用戶',
            collapsible: true,
            split: true,
            width: 150
        }, {
            region: 'center',
            xtype: 'tabpanel', 
            id: 'MainTabPanel',
            activeTab: 0,  
            items: {
                title: '首頁',
                html: '<h1>歡迎使用</h1><input type="button" value="添加新標簽" onclick="CreateIframeTab(\'MainTabPanel\',\'01\', \'系統管理\', \'http://www.baidu.com\');" />'
            }
        }]
    });

    bindNavToTab("MainMenu", "MainTabPanel");
});

function bindNavToTab(accordionId, tabId) {
    var accordionPanel = Ext.getCmp(accordionId);
    if (!accordionPanel) return;

    var treeItems = accordionPanel.queryBy(function (cmp) {
        if (cmp && cmp.getXType() === 'treepanel') return true;
        return false;
    });
    if (!treeItems || treeItems.length == 0) return;

    for (var i = 0; i < treeItems.length; i++) {
        var tree = treeItems[i];

        tree.on('itemclick', function (view, record, htmlElement, index, event, opts) {
            if (record.isLeaf()) {
                // 阻止事件傳播
                event.stopEvent();

                var href = record.data.href;

                if (!href) return;
                // 修改地址欄
                window.location.hash = '#' + href;
                // 新增Tab節點
                CreateIframeTab(tabId, record.data.id, record.data.text, href);
            }
        });
    }
}

function CreateIframeTab(tabpanelId, tabId, tabTitle, iframeSrc) {
    var tabpanel = Ext.getCmp(tabpanelId);
    if (!tabpanel) return;  //未找到tabpanel，返回

    //尋找id相同的tab
    var tab = Ext.getCmp(tabId);
    if (tab) { tabpanel.setActiveTab(tab); return; }

    //新建一個tab，並將其添加到tabpanel中
    //tab = Ext.create('Ext.tab.Tab', );
    tab = tabpanel.add({
        id: tabId,
        title: tabTitle,
        closable: true,
        html: '<iframe style="overflow:auto;width:100%; height:100%;" src="' + iframeSrc + '" frameborder="0"></iframe>'
    });
    tabpanel.setActiveTab(tab);
}