ExtJS6開發(fā)實例（三）：主界面設(shè)計-創(chuàng)新互聯(lián)

在上文中，已經(jīng)將CMD創(chuàng)建的應(yīng)用程序?qū)氲巾椖坷锪?，而且也看到默認(rèn)的主界面了，今天的主要工作就是修改這個主界面，以符合項目的需要。除了設(shè)計主界面，還有一些其他的東西需要配置一下。

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為沂南等服務(wù)建站，沂南等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為沂南企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

添加本地化包

打開app.json文件，找到requires，代碼如下：

    "requires": [      "font-awesome"

    ],12341234

以上代碼說明項目默認(rèn)已經(jīng)引用了Font Awesome的圖標(biāo)，可以在項目中直接使用。這個在項目的后續(xù)開發(fā)中會經(jīng)常使用到。

本地化文件從Ext JS 5開始，就已經(jīng)采用包的方式來提供了，也就是說，在執(zhí)行sencha app build的時候，會將引用的本地化包也打包到最終的app.js文件中，不再需要在頁面中使用SCRIPT標(biāo)記來另外加載了。

要添加本地化包，需要在requires對應(yīng)的數(shù)組中添加“l(fā)ocale”項，然后添加一個locale配置，用來聲明需要引用哪些本地化包，這里只需要引用中文，所以只需要把“zh_CN”作為locale配置的值就行了。

添加本地化包的最終代碼如下：

    "requires": [        "font-awesome",        "locale"
     ],    "locale": "zh_CN",123456123456

好了，現(xiàn)在執(zhí)行一次sencha app build重新生成一下應(yīng)用程序，然后在瀏覽器中打開應(yīng)用程序，如果在firebug的網(wǎng)絡(luò)面板中看到已加載ext-locale-zh_CN.js文件，說明本地化文件已可以正確加載，可以使用了。

主界面設(shè)計

從上文最后一張圖片可以看到，默認(rèn)創(chuàng)建的主界面是一個左右結(jié)構(gòu)的界面。研究下app\view\main目錄下的Main.js可以清楚的知道，整 個界面其實是用標(biāo)簽面板（Ext.tab.Panel）實現(xiàn)的，只不過是將標(biāo)簽放置在了左邊而已。這可以說是目前比較流行的一種界面結(jié)構(gòu)了。不過，我還是 希望能有一個頂欄用來顯示項目名稱和退出按鈕等東西。

要添加一個頂欄，我比較傾向的方式是使用垂直盒子（VBox）布局來將一個容器劃分為上下兩個部分，當(dāng)然，如果習(xí)慣使用邊框布局（Border）的，也可以用，問題不大，能實現(xiàn)自己所需就行了。

為了實現(xiàn)以上修改，我打算添加一個視區(qū)視圖，在視區(qū)視圖內(nèi)，使用垂直盒子布局來將它劃分為上下兩個部分，在上半部分，還需要添加一個頂部視圖用來控制頂部視圖的顯示，而下半部分繼續(xù)使用現(xiàn)在的主視圖。

定義主視圖

在app/view目錄下添加一個名為Viewport.js的文件，然后添加基本的定義代碼：

Ext.define('SimpleCMS.view.Viewport', {
    extend: 'Ext.container.Container',    requires: [        'Ext.layout.container.VBox',        'Ext.plugin.Viewport',
    ],    layout: {
        type: 'vbox',        align: 'stretch'
    },

});1234567891011121312345678910111213

由于在Ext JS 6，Viewport類使用了插件的形式來實現(xiàn)，因而這里也遵守這種方式。在這里引用了Ext.layout.container.VBox類，用來實現(xiàn)垂直盒子布局。

在layout配置項中，定義了這里將使用垂直盒子布局，align配置項的作用是告訴父組件，子組件的寬度將填滿父組件的寬度。

接下來是添加子組件，代碼如下：

    items: [
        {
            xtype: 'app-header',
            height: 65,
            id: 'app-header'
        },
        {
            xtype: 'app-main', flex: 1
        }
    ]1234567891012345678910

盡管頂部視圖還沒定義，不過還是可以先把app-header作為頂部視圖的xtype值。在這里，頂部視圖的高度將被定位為65個像素。為頂部視圖定義一個id的目的是為了便于編寫頂部的視圖的樣式。

在下半部分，將顯示原來的主視圖。在這里使用了flex配置項，它的作用是告訴父組件，該子視圖的高度將填滿父組件減去頂部視圖后余下的高度。

定義頂部視圖

在app/view目錄下創(chuàng)建一個名為header的目錄，然后在該目錄下添加名字為Main.js的文件。

下面先來定義視圖，視圖與Ext JS 4版本一樣，將使用工具欄來實現(xiàn)，在左邊顯示項目的標(biāo)題，在右邊顯示修改密碼和退出按鈕，代碼如下：

Ext.define("SimpleCMS.view.header.Main",{
    extend: "Ext.toolbar.Toolbar",

    cls: 'toolbar-btn-shadow',

    xtype: 'app-header',

    items: [
        { xtype: 'tbtext', text: '簡單的CMS系統(tǒng)', id: 'app-header-title' },        '->',
        { tooltip: '修改密碼', iconCls: 'x-fa fa-key header-button-color', cls: 'simplecms-header-button', handler: 'onChangePassword' },
        { tooltip: '退出', cls: 'simplecms-header-button', iconCls: 'x-fa fa-sign-out header-button-color', handler: 'onExit' }    ]});12345678910111213141234567891011121314

在工具欄內(nèi)，在左邊使用Ext.toolbar.TextItem組件來顯示項目標(biāo)題。為標(biāo)題定義一個id是為了便于定義樣式。

在定義中，“->”表示這里將使用Ext.toolbar.Fill來填充空間，以便實現(xiàn)子組件顯示在右邊。

在定義的兩個按鈕中，使用了FONT AWESOME的字體圖標(biāo)來作為圖標(biāo)。FONT AWESOME有許多圖標(biāo)，該如何選擇并使用呢？其實很簡單，在瀏覽器中打開http://fontawesome.io/icons/ ，就可以看到在FONT AWESOME中有哪些圖標(biāo)了，當(dāng)選中一個圖標(biāo)，如car，會在頁面中看到如下示例代碼：

<i class="fa fa-car" aria-hidden="true"></i>11

在代碼中的“fa fa-car”就是所需的樣式名，在Ext JS 6中使用，只需要在第一fa前添加“x-”就可以了，如類定義代碼中的“x-fa fa-key”。

使用FONT AWESOME圖標(biāo)，默認(rèn)情況下與頁面中看到的情形一樣，圖標(biāo)都是黑色的，這時候，可以通過樣式來改變字體顏色，在上面代碼中，樣式”header-button-color“就是用來定義字體顏色的。

由于Ext JS的按鈕在默認(rèn)情況下是有背景顏色的，因而在上門代碼中，使用了cls配置項來添加一個樣式”simplecms-header-button“以便去除背景顏色。

哪為什么要使用cls配置項來去除背景，而不是直接在iconCls中實現(xiàn)呢?如果你研究過一個按鈕的HTML實現(xiàn)，就會發(fā)現(xiàn)它的結(jié)構(gòu)是這樣的：

<a>
    <span>
        <span>
            <span></span>
            <span></span>
        </span>
    </span></a>1234567812345678

在這個結(jié)構(gòu)中，A元素是頂級元素，按鈕的背景顏色等，是在這一層定義的。而按鈕的圖標(biāo)和文字使用最深層的兩個SPAN元素來實現(xiàn)的，其中第一個 SPAN元素是用來顯示圖標(biāo)的，第二個SPAN元素是用來顯示文字的。iconCls配置項的作用是定義按鈕圖標(biāo)，因而為它定義的樣式只會應(yīng)用于最深層的 第一個SPAN元素，這樣，在這里添加樣式是取消不了按鈕的背景顏色的。而cls配置項則不同，它的作用就是用來定義按鈕的整體樣式的，會將樣式應(yīng)用于A 元素。

大家可能注意到，在這里并沒有為頂部視圖定義它的控制器和視圖模型，主要是因為該類比較簡單，也不涉及數(shù)據(jù)綁定，因而只定義一個視圖文件就足夠了。

為頂部視圖添加樣式

在頂部視圖定義了不少樣式，下面來定義這些樣式。定義方法與Ext JS 4是一樣的。在應(yīng)用程序目錄下有一個sass目錄，這個目錄就是用來定義樣式的。在該目錄下有etc、example、src和var這4個目錄，其 中，src目錄是直接用來定義樣式的，而var目錄就是用來定義樣式變量的，具體就是API中所看到CSS Vars中的變量，當(dāng)然，也可以定義自己的變量，在這里并不需要用到，因而就不展開了。

在src目錄下要定義某個視圖的樣式，首先，要做的就是保持與視圖一樣的目錄結(jié)構(gòu)，如頂部視圖的目錄結(jié)構(gòu)是view/header，那么在src 下，也應(yīng)該在view/header目錄下定義頂部視圖的樣式。其次，就是文明名除了擴展名外，也必須是相同的，如現(xiàn)在頂部視圖的文件名為 Main.js，則頂部視圖對應(yīng)的樣式文件是Main.sass。

在src/view/header目錄下創(chuàng)建Main.sass文件后，添加以下樣式代碼：

#app-header{    background-color:#6A9A1F;    border-bottom:1px solid #0d1218 !important,}.toolbar-btn-shadow {    box-shadow: 0 1px 2px rgba(13, 18, 24, 0.2);}#app-header-title {    color: #fff;    font-size: 18px;    padding: 10px 0 10px;}.simplecms-header-button{    border:none;    background:none;}.header-button-color{    color:orange;}1234567891011121314151617181920212212345678910111213141516171819202122

修改app.js文件

由于在app.js文件中，默認(rèn)是使用SimpleCMS.view.main.Main作為主視圖的，而主視圖現(xiàn)在已經(jīng)修改為SimpleCMS.view.Viewport，因而需要進行修改。

結(jié)果

現(xiàn)在執(zhí)行一次sencha app build，然后刷新瀏覽器，就應(yīng)該能看到如下圖的效果了。

從圖中可以看到，整體效果已經(jīng)出來了，下一步要做的就是調(diào)整下半部視圖的顯示了，這個下文再說。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

分享題目：ExtJS6開發(fā)實例（三）：主界面設(shè)計-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://bm7419.com/article30/cdggpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、云服務(wù)器、網(wǎng)站維護、品牌網(wǎng)站設(shè)計、服務(wù)器托管、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)