成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

zhkai / 2475人閱讀

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

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

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

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

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

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

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

接下來(lái)逐個(gè)定義每個(gè)區(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 = [{//先放個(gè)LOGO
            xtype: "image",
            cls: "circle-pic",
            src: "app/resource/images/logo.png"
        }, {//再顯示個(gè)標(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中定義了幾個(gè)樣式:

 
.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);
    }
});

在這里，用到了一個(gè)時(shí)鐘插件：TrayClock，這是一個(gè)自定義的插件，統(tǒng)一放在目錄：
app/luter/ux下面。

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92678.html

相關(guān)文章

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

    摘要：結(jié)構(gòu)實(shí)踐三完善基本頁(yè)面一般經(jīng)典的后臺(tái)管理系統(tǒng)，都是左側(cè)菜單右側(cè)結(jié)構(gòu)布局。不免俗，咱也這么實(shí)現(xiàn)定義左側(cè)導(dǎo)航菜單新建采用的組件構(gòu)建一個(gè)導(dǎo)航菜單為了顯示圖標(biāo)，引入字體圖標(biāo)，在引入引入定義導(dǎo)航菜單數(shù)據(jù)功能菜單展開節(jié)點(diǎn)。 extjs-mvc結(jié)構(gòu)實(shí)踐(三):完善基本頁(yè)面2 一般經(jīng)典的后臺(tái)管理系統(tǒng)，都是左側(cè)菜單右側(cè)tabs結(jié)構(gòu)布局。不免俗，咱也這么實(shí)現(xiàn)！ 定義左側(cè)導(dǎo)航菜單 新建：app/luter/...

    X1nFLY 評(píng)論0 收藏0

  • extjs-mvc結(jié)構(gòu)實(shí)踐(二):基本頁(yè)面

    摘要：接著來(lái)，上一篇搭建了基本的項(xiàng)目骨架，到最后，其實(shí)啥也沒看見。。。目標(biāo)全屏顯示左側(cè)導(dǎo)航菜單，右側(cè)標(biāo)簽頁(yè)切換操作內(nèi)容區(qū)域。一般模型與你后臺(tái)返回的數(shù)據(jù)結(jié)構(gòu)一一對(duì)應(yīng)。給其他組件提供一致接口使用數(shù)據(jù)。整個(gè)構(gòu)成一個(gè)所謂的。 接著來(lái)，上一篇搭建了基本的項(xiàng)目骨架，到最后，其實(shí)啥也沒看見。。。書接上回，開始寫UI效果。 目標(biāo) 全屏顯示、左側(cè)導(dǎo)航菜單，右側(cè)標(biāo)簽頁(yè)切換操作內(nèi)容區(qū)域。包含header和foo...

    changfeng1050 評(píng)論0 收藏0

  • extjs-mvc結(jié)構(gòu)實(shí)踐(一):搭建基礎(chǔ)架構(gòu)

    摘要：今天開始，一點(diǎn)點(diǎn)記錄一下使用搭建一個(gè)基礎(chǔ)結(jié)構(gòu)的過(guò)程。沒辦法，記性差這種結(jié)構(gòu)的前端，主要是面向后臺(tái)信息管理系統(tǒng)，可以最大限度的規(guī)范前端代碼結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)。 今天開始，一點(diǎn)點(diǎn)記錄一下使用extjs6.2.0搭建一個(gè)基礎(chǔ)MVC結(jié)構(gòu)的過(guò)程。沒辦法，記性差:)這種結(jié)構(gòu)的UI前端，主要是面向后臺(tái)信息管理系統(tǒng)，可以最大限度的規(guī)范前端代碼結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)。做網(wǎng)站 或者手機(jī)端，這種方式全引入了extjs,...

    kamushin233 評(píng)論0 收藏0

  • extjs-mvc結(jié)構(gòu)實(shí)踐(四):導(dǎo)航菜單與控制器模塊聯(lián)動(dòng)

    摘要：根據(jù)模塊創(chuàng)建模塊失敗。在中，我們配置了標(biāo)明了這是一個(gè)控制器模塊，點(diǎn)擊后會(huì)去觸發(fā)控制器加載動(dòng)作。正常情況下同一個(gè)模塊的只加載一次。 前面幾篇文檔，我們基本實(shí)現(xiàn)了一個(gè)靜態(tài)的extjs頁(yè)面，本篇開始，實(shí)現(xiàn)左側(cè)導(dǎo)航樹與右側(cè)內(nèi)容的聯(lián)動(dòng)，也就是點(diǎn)擊導(dǎo)航菜單，加載對(duì)應(yīng)模塊頁(yè)面和業(yè)務(wù)邏輯，實(shí)現(xiàn)js文件的按需加載。 業(yè)務(wù)需求是這樣的： 左側(cè)的treelist，當(dāng)點(diǎn)擊某個(gè)節(jié)點(diǎn)的時(shí)候，系統(tǒng)根據(jù)tree數(shù)據(jù)里...

    figofuture 評(píng)論0 收藏0

  • extjs-mvc結(jié)構(gòu)實(shí)踐(五):實(shí)現(xiàn)用戶管理的增刪改查

    摘要：而且上一篇文章中，也已經(jīng)實(shí)現(xiàn)了一個(gè)基本的用戶管理列表頁(yè)面。接著上一篇，完善用戶管理，實(shí)現(xiàn)增刪改。為了用戶體驗(yàn)，增加和修改用戶信息的表單，都放在彈窗中進(jìn)行。 經(jīng)過(guò)前面幾篇文章的介紹，一個(gè)基本的MVC結(jié)構(gòu)應(yīng)該是具備了。而且上一篇文章中，也已經(jīng)實(shí)現(xiàn)了一個(gè)基本的用戶管理列表頁(yè)面。接著上一篇，完善用戶管理，實(shí)現(xiàn)增刪改。為了用戶體驗(yàn)，增加和修改用戶信息的表單，都放在彈窗中進(jìn)行。避免跳轉(zhuǎn)頁(yè)面。 定義...

    wendux 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<