extjs-mvc結(jié)構(gòu)實(shí)踐(三):完善基本頁面

zhkai 發(fā)布于2019-08-22 13:57 / 2412人閱讀

摘要：上篇實(shí)現(xiàn)了基本的代碼架構(gòu)，控制器動態(tài)加載功能以及一個基礎(chǔ)的頁面布局，本節(jié)開始，將陸續(xù)完善這個頁面。頁面底部區(qū)域，主要顯示版權(quán)信息等，也可以顯示個時間啥的。。。頭部和底部定義完畢后，需要在中引入對應(yīng)位置。

上篇實(shí)現(xiàn)了基本的代碼架構(gòu)，控制器動態(tài)加載功能以及一個基礎(chǔ)的頁面布局，本節(jié)開始，將陸續(xù)完善這個頁面。

目標(biāo)

如前所述，我們的頁面包含這么幾個區(qū)域：

header: UI頂部區(qū)域，顯示系統(tǒng)名稱，LOGO，用戶頭像等其他操作。

footer: 頁面底部區(qū)域，主要顯示版權(quán)信息等，也可以顯示個時間啥的。。。

nav tree:頁面導(dǎo)航菜單，一般在頁面左側(cè)，一般也是一棵樹！

content panel:中間內(nèi)容區(qū)域，左側(cè)導(dǎo)航點(diǎn)擊之后，頁面會被加載到這個區(qū)域，一般是個panel或者tab切換控件。

接下來逐個定義每個區(qū)域的內(nèi)容。

定義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"
        }, {//再顯示個標(biāo)題
            xtype: "tbtext",
            flex: 4,
            style: {
                color: "#FFF",
                fontSize: "20px",
                padding: "0px 10px 0px  55px",
                fontWeight: 900
            },
            text: "這里是系統(tǒng)標(biāo)題"
        }];
        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 版權(quán)所有"+":"+"v1.0"+""
            }, "->", 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，這是一個自定義的插件，統(tǒng)一放在目錄：
app/luter/ux下面。

頭部和底部定義完畢后，需要在viewport中引入對應(yīng)位置。如下：

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

/**
 * 主視圖占滿全屏是個viewport
 */
Ext.define("luter.view.main.ViewPort", {
    extend: "Ext.Viewport",
    alias: "widget.viewport",//別名，與xtype對應(yīng)
    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"http://使用自定義的頭部,xtype對應(yīng)組件定義里的：xtype
            }, {
                region: "west",
                xtype: "panel",
                title: "西方",
                width: 200
            }, {
                region: "center",
                title: "中間",
                xtype: "panel"

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

至此，界面大致看起來應(yīng)該像這樣：

下一篇，我們繼續(xù)完善這個界面，定義左側(cè)導(dǎo)航、右側(cè)內(nèi)容展示區(qū)域，以及左側(cè)與右側(cè)操作聯(lián)動等內(nèi)容。