Ext JS 6開發實例（四） ：調整主視圖

上文把主界面設置好，可是主視圖由於界面的微調出現了顯示問題，本文將把它調整好了。

打開app/view/main/Main.js，能夠看到主視圖是派生於標籤面板（Ext.tab.Panel）的。在視圖的標籤欄內，除了顯示標籤外，還顯示了標題欄。因爲已經從新設計了標題欄，主視圖的標籤欄就不須要了，於是先把這個去掉。

檢查一下代碼，會發現代碼中有個header配置項，根據API能夠知道，該配置項是用來定義面板的標題的，於是把這段代碼先去掉。在瀏覽器中刷新一下，會看到以下圖的效果：

從圖中能夠看到，標題是去掉了，但仍是有問題，再檢查下代碼，會發現如下三個配置項是與標題和標籤的設置有關的：

    tabBarHeaderPosition: 1,
    titleRotation: 0,
    tabRotation: 0,123123

根據API，能夠知道tabBarHeaderPosition是用來指定標題欄的位置的，於是能夠去掉；titleRotation是用來控制標題文本的顯示方向的，這個也能夠去掉；tabRotation是用來控制標籤文本的顯示方向的，暫時保留。

刷新一下瀏覽器，可看到下圖的效果：

從圖中能夠看到，標題欄已經去掉了，可是標籤仍是在頂部。查一下API，能夠找到tabPosition配置項，經過它能夠控制標籤的位置，於是在代碼中添加如下代碼，讓標籤顯示在左邊：

tabPosition: 'left',11

刷新一下瀏覽器，可看到以下圖所示的效果：

從圖中能夠看到，目標已經實現了。

雖然基本目標已經達成，可是否還存在些小疑惑？爲何這個標籤面板的標籤顯示與主題所默認所顯示的標籤（下圖）會不一樣？

這是由於，在主視圖中使用了自定義的UI，代碼以下：

ui: 'navigation',11

根據API，ui配置項的做用是用來指定組件的UI樣式，默認值是default，也就是使用默認的樣式。而在這裏，將值指定爲了navigation，也就是說，當前的標籤頁將使用navigation樣式，那麼這個樣式是在哪裏定義的呢？

你們打開sass\src\view\main\Main.scss文件，就會看到navigation的樣式定義了。打開文件後，會看到以下的一些代碼：

@include extjs-tab-panel-ui(    $ui: 'navigation',    $ui-tab-background-color: transparent,    $ui-tab-background-color-over: #505050,    $ui-tab-background-color-active: #303030,    $ui-tab-background-gradient: 'none',    $ui-tab-background-gradient-over: 'none',    $ui-tab-background-gradient-active: 'none',    $ui-tab-color: #acacac,    $ui-tab-color-over: #c4c4c4,    $ui-tab-color-active: #fff,    $ui-tab-glyph-color: #acacac,    $ui-tab-glyph-color-over: #c4c4c4,    $ui-tab-glyph-color-active: #fff,    $ui-tab-glyph-opacity: 1,    $ui-tab-border-radius: 0,    $ui-tab-border-width: 0,    $ui-tab-inner-border-width: 0,    $ui-tab-padding: 24px,    $ui-tab-margin: 0,    $ui-tab-font-size: 15px,    $ui-tab-font-size-over: 15px,    $ui-tab-font-size-active: 15px,    $ui-tab-line-height: 19px,    $ui-tab-font-weight: bold,    $ui-tab-font-weight-over: bold,    $ui-tab-font-weight-active: bold,    $ui-tab-icon-width: 24px,    $ui-tab-icon-height: 24px,    $ui-tab-icon-spacing: 5px,    $ui-bar-background-color: #404040,    $ui-bar-background-gradient: 'none',    $ui-bar-padding: 0,    $ui-strip-height: 0);12345678910111213141516171819202122232425262728293031323334351234567891011121314151617181920212223242526272829303132333435

當看到以上的東西，必定會問，這是什麼鬼？徹底看不懂啊！先別慌，先打開Ext JS 6的API，找到Ext.tab.Panel的說明，而後在工具欄中找到CSS Mixins菜單，選擇extjs-tab-panel-ui，就會看到下圖說明了：

從圖中的說明能夠了解到，「$ui」定義的是UI的名字，「$ui-tab-background-color」就是標籤的背景顏色……

根據模板給的示範，是否會以爲：其實修改Ext JS 6的樣式也不算太難呢？
個人意見是不太難，難的在於入門，呵呵。

在主視圖的定義中，還有2個比較特別的配置項：responsiveConfig和defaults和。他們又有什麼做用呢？

在API中直接搜索responsiveConfig並切換到Ext.mixin.Responsive類，就能夠知道，該配置項的做用是在指定條件下將應用怎樣的顯示，主視圖中的定義說明，在豎向顯示的時候，標題欄將顯示在頂部，而在橫向顯示的時候，則顯示在左邊。

配置項defaults的做用是用來指定子組件的默認配置的，也就是說，在標籤面板建立子組件的時候，會把defaults中的配置項應用到子組件 中。根據defaults中的配置項，能夠了解到，標籤頁的內容區域將會向內收縮20個像素（bodyPadding），而每一個標籤頁的標籤 （tabConfig）將應用插件Ext.plugin.Responsive，這樣，就能夠實如今顯示是橫向的時候，標籤將顯示在左邊，顯示是豎向的時 候，標籤顯示在頂部，並且寬度固定爲120像素。

因爲當前項目只基於PC端，於是這兩個配置項對當前項目來講意義不大，能夠刪除。

接下來修改一下標籤頁，在當前項目須要用到三個標籤頁：用戶管理、文章管理和圖片管理。具體修改代碼以下：

    items: [
        {
            title: '用戶管理',
            iconCls: 'fa-user'
        },
        {
            title: '文章管理',
            iconCls: 'fa-file-text-o',
        },
        {
            title: '圖片管理',
            iconCls: 'fa-photo',
        }
    ]12345678910111213141234567891011121314

這時候若是刷新瀏覽器，可能會出現亂碼的狀況，這是由於頁面的代碼頁不是Unicode的，由於須要修改一下文件的代碼頁。在Visual Studio中，可在文件菜單中選擇「高級保存選項」，而後以下圖那樣，將編碼設置爲Unicode，再保存就好了。

如今刷新瀏覽器，可看到以下圖的效果：

今天就說到這了，有什麼問題或疑問，請加入qq交流羣391747779 進行諮詢。