Ext JS 6開發(fā)實(shí)例（三） ：主界面設(shè)計(jì)

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

添加本地化包

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

    "requires": [      "font-awesome"

    ],12341234

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

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

要添加本地化包，需要在requires對(duì)應(yīng)的數(shù)組中添加“l(fā)ocale”項(xiàng)，然后添加一個(gè)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è)計(jì)

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

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

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

定義主視圖

在app/view目錄下添加一個(gè)名為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類使用了插件的形式來實(shí)現(xiàn)，因而這里也遵守這種方式。在這里引用了Ext.layout.container.VBox類，用來實(shí)現(xiàn)垂直盒子布局。

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

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

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

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

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

定義頂部視圖

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

下面先來定義視圖，視圖與Ext JS 4版本一樣，將使用工具欄來實(shí)現(xiàn)，在左邊顯示項(xiàng)目的標(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組件來顯示項(xiàng)目標(biāo)題。為標(biāo)題定義一個(gè)id是為了便于定義樣式。

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

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

<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)都是黑色的，這時(shí)候，可以通過樣式來改變字體顏色，在上面代碼中，樣式”header-button-color“就是用來定義字體顏色的。

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

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

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

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

大家可能注意到，在這里并沒有為頂部視圖定義它的控制器和視圖模型，主要是因?yàn)樵擃惐容^簡單，也不涉及數(shù)據(jù)綁定，因而只定義一個(gè)視圖文件就足夠了。

為頂部視圖添加樣式

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

在src目錄下要定義某個(gè)視圖的樣式，首先，要做的就是保持與視圖一樣的目錄結(jié)構(gòu)，如頂部視圖的目錄結(jié)構(gòu)是view/header，那么在src 下，也應(yīng)該在view/header目錄下定義頂部視圖的樣式。其次，就是文明名除了擴(kuò)展名外，也必須是相同的，如現(xiàn)在頂部視圖的文件名為 Main.js，則頂部視圖對(duì)應(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，因而需要進(jìn)行修改。

結(jié)果

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

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