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，然后刷新瀏覽器，就應該能看到如下圖的效果了。

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