extjs-mvc結構實踐(三):完善基本頁面

上篇實現了基本的代碼架構，控制器動態加載功能以及一個基礎的頁面佈局，本節開始，將陸續完善這個頁面。

目標

如前所述，咱們的頁面包含這麼幾個區域：

• header: UI頂部區域，顯示系統名稱，LOGO，用戶頭像等其餘操做。
• footer: 頁面底部區域，主要顯示版權信息等，也能夠顯示個時間啥的。。。
• nav tree:頁面導航菜單，通常在頁面左側，通常也是一棵樹！
• content panel:中間內容區域，左側導航點擊以後，頁面會被加載到這個區域，通常是個panel或者tab切換控件。

接下來逐個定義每一個區域的內容。

---

定義header：app/luter/view/main/Header.js

Ext.define('luter.view.main.Header', {
    extend: 'Ext.Container',//繼承自容器類
    xtype: 'appheader',
    cls: 'app-header',//自定義樣式，參見style.css
    height: 52,//高度
    layout: {//佈局，水平box佈局
        type: 'hbox',
        align: 'middle'
    },
    initComponent: function () {
        var me = this;
        me.items = [{//先放個LOGO
            xtype: 'image',
            cls: 'circle-pic',
            src: 'app/resource/images/logo.png'
        }, {//再顯示個標題
            xtype: 'tbtext',
            flex: 4,
            style: {
                color: '#FFF',
                fontSize: '20px',
                padding: '0px 10px 0px  55px',
                fontWeight: 900
            },
            text: '這裏是系統標題'
        }];
        me.callParent();
    }
});

其中，在app/resource/css/style.css中定義了幾個樣式:

.app-header {
    background-color: #2a3f5d;
    border-bottom: 2px solid #1d9ce5;

}
.app-header:hover {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
}
.circle-pic {
    width: 45px;
    height: 45px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.home-body {
    background-image: url(../images/square.gif);
}

---

定義footer:app/luter/view/main/Footer.js

Ext.define('luter.view.main.Footer', {
    extend: 'Ext.toolbar.Toolbar',//繼承自工具欄
    region: 'south',
    xtype: 'sysfooter',
    style: {//背景色黑色
        background: '#000'
    },
    frame: false,
    border: false,
    height: 30,
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                xtype: 'tbtext',
                style: {
                    color: '#FFF',
                    fontSize: '14px',
                    textAlign: 'right',
                    fontWeight: 'bold'
                },
                flex: 3,
                id: 'southText',
                text:  Ext.Date.format(new Date(), 'Y') +' © ' +"luter 版權全部"+'<small>:'+"v1.0"+'</small>'
            }, '->', Ext.create('luter.ux.TrayClock', {
                flex: 1,
                style: {
                    color: '#FFF',
                    padding: '0px 0px 0px  0px',
                    fontWeight: 'bold',
                    textAlign: 'right',
                    fontSize: '12px'
                }
            })]
        });
        me.callParent(arguments);
    }
});

在這裏，用到了一個時鐘插件：TrayClock，這是一個自定義的插件，統一放在目錄：
app/luter/ux下面。

---

頭部和底部定義完畢後，須要在viewport中引入對應位置。以下：

修改viewport:app/luter/view/main/Viewport.js

/**
 * 主視圖佔滿全屏是個viewport
 */
Ext.define('luter.view.main.ViewPort', {
    extend: 'Ext.Viewport',
    alias: 'widget.viewport',//別名，與xtype對應
    layout: 'border',//東南西北中佈局，邊界嘛
    stores: [],
    requires: ['luter.view.main.Header','luter.view.main.Footer'],//引入自定義的header和footer
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            items: [{
                region: 'north',
                xtype: 'appheader'//使用自定義的頭部,xtype對應組件定義裏的：xtype
            }, {
                region: 'west',
                xtype: 'panel',
                title: '西方',
                width: 200
            }, {
                region: 'center',
                title: '中間',
                xtype: 'panel'

            }, {
                region: 'south',
                xtype: 'sysfooter'//使用自定義的footer
            }]
        });
        me.callParent(arguments);
    }
});

---

至此，界面大體看起來應該像這樣：

下一篇，咱們繼續完善這個界面，定義左側導航、右側內容展現區域，以及左側與右側操做聯動等內容。