Ext JS 6開發實例（三） ：主界面設計

在上文中，已經將CMD建立的應用程序導入到項目裏了，並且也看到默認的主界面了，今天的主要工做就是修改這個主界面，以符合項目的須要。除了設計主界面，還有一些其餘的東西須要配置一下。

添加本地化包

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

    "requires": [      "font-awesome"

    ],12341234

以上代碼說明項目默認已經引用了Font Awesome的圖標，能夠在項目中直接使用。這個在項目的後續開發中會常用到。

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

要添加本地化包，須要在requires對應的數組中添加「locale」項，而後添加一個locale配置，用來聲明須要引用哪些本地化包，這裏只須要引用中文，因此只須要把「zh_CN」做爲locale配置的值就好了。

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

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

好了，如今執行一次sencha app build從新生成一下應用程序，而後在瀏覽器中打開應用程序，若是在firebug的網絡面板中看到已加載ext-locale-zh_CN.js文件，說明本地化文件已能夠正確加載，可使用了。

主界面設計

從上文最後一張圖片能夠看到，默認建立的主界面是一個左右結構的界面。研究下app\view\main目錄下的Main.js能夠清楚的知道，整 個界面實際上是用標籤面板（Ext.tab.Panel）實現的，只不過是將標籤放置在了左邊而已。這能夠說是目前比較流行的一種界面結構了。不過，我仍是 但願能有一個頂欄用來顯示項目名稱和退出按鈕等東西。

要添加一個頂欄，我比較傾向的方式是使用垂直盒子（VBox）佈局來將一個容器劃分爲上下兩個部分，固然，若是習慣使用邊框佈局（Border）的，也能夠用，問題不大，能實現本身所需就好了。

爲了實現以上修改，我打算添加一個視區視圖，在視區視圖內，使用垂直盒子佈局來將它劃分爲上下兩個部分，在上半部分，還須要添加一個頂部視圖用來控制頂部視圖的顯示，而下半部分繼續使用如今的主視圖。

定義主視圖

在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類使用了插件的形式來實現，於是這裏也遵照這種方式。在這裏引用了Ext.layout.container.VBox類，用來實現垂直盒子佈局。

在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目錄下建立一個名爲header的目錄，而後在該目錄下添加名字爲Main.js的文件。

下面先來定義視圖，視圖與Ext JS 4版本同樣，將使用工具欄來實現，在左邊顯示項目的標題，在右邊顯示修改密碼和退出按鈕，代碼以下：

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

    cls: 'toolbar-btn-shadow',

    xtype: 'app-header',

    items: [
        { xtype: 'tbtext', text: '簡單的CMS系統', 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

在工具欄內，在左邊使用Ext.toolbar.TextItem組件來顯示項目標題。爲標題定義一個id是爲了便於定義樣式。

在定義中，「->」表示這裏將使用Ext.toolbar.Fill來填充空間，以便實現子組件顯示在右邊。

在定義的兩個按鈕中，使用了FONT AWESOME的字體圖標來做爲圖標。FONT AWESOME有許多圖標，該如何選擇並使用呢？其實很簡單，在瀏覽器中打開http://fontawesome.io/icons/ ，就能夠看到在FONT AWESOME中有哪些圖標了，當選中一個圖標，如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圖標，默認狀況下與頁面中看到的情形同樣，圖標都是黑色的，這時候，能夠經過樣式來改變字體顏色，在上面代碼中，樣式」header-button-color「就是用來定義字體顏色的。

因爲Ext JS的按鈕在默認狀況下是有背景顏色的，於是在上門代碼中，使用了cls配置項來添加一個樣式」simplecms-header-button「以便去除背景顏色。

哪爲何要使用cls配置項來去除背景，而不是直接在iconCls中實現呢?若是你研究過一個按鈕的HTML實現，就會發現它的結構是這樣的：

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

在這個結構中，A元素是頂級元素，按鈕的背景顏色等，是在這一層定義的。而按鈕的圖標和文字使用最深層的兩個SPAN元素來實現的，其中第一個 SPAN元素是用來顯示圖標的，第二個SPAN元素是用來顯示文字的。iconCls配置項的做用是定義按鈕圖標，於是爲它定義的樣式只會應用於最深層的 第一個SPAN元素，這樣，在這裏添加樣式是取消不了按鈕的背景顏色的。而cls配置項則不一樣，它的做用就是用來定義按鈕的總體樣式的，會將樣式應用於A 元素。

你們可能注意到，在這裏並無爲頂部視圖定義它的控制器和視圖模型，主要是由於該類比較簡單，也不涉及數據綁定，於是只定義一個視圖文件就足夠了。

爲頂部視圖添加樣式

在頂部視圖定義了很多樣式，下面來定義這些樣式。定義方法與Ext JS 4是同樣的。在應用程序目錄下有一個sass目錄，這個目錄就是用來定義樣式的。在該目錄下有etc、example、src和var這4個目錄，其 中，src目錄是直接用來定義樣式的，而var目錄就是用來定義樣式變量的，具體就是API中所看到CSS Vars中的變量，固然，也能夠定義本身的變量，在這裏並不須要用到，於是就不展開了。

在src目錄下要定義某個視圖的樣式，首先，要作的就是保持與視圖同樣的目錄結構，如頂部視圖的目錄結構是view/header，那麼在src 下，也應該在view/header目錄下定義頂部視圖的樣式。其次，就是文明名除了擴展名外，也必須是相同的，如如今頂部視圖的文件名爲 Main.js，則頂部視圖對應的樣式文件是Main.sass。

在src/view/header目錄下建立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文件中，默認是使用SimpleCMS.view.main.Main做爲主視圖的，而主視圖如今已經修改成SimpleCMS.view.Viewport，於是須要進行修改。

結果

如今執行一次sencha app build，而後刷新瀏覽器，就應該能看到以下圖的效果了。

從圖中能夠看到，總體效果已經出來了，下一步要作的就是調整下半部視圖的顯示了，這個下文再說。