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

打開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 進行咨詢。

轉載于:https://blog.51cto.com/dqhuang/1783847

總結

以上是生活随笔為你收集整理的Ext JS 6开发实例（四） ：调整主视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。