ExtJS6開發(fā)實(shí)例（四）：調(diào)整主視圖-創(chuàng)新互聯(lián)

上文把主界面設(shè)置好，但是主視圖因?yàn)榻缑娴奈⒄{(diào)出現(xiàn)了顯示問題，本文將把它調(diào)整好了。

在麻陽等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需定制,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),麻陽網(wǎng)站建設(shè)費(fèi)用合理。

打開app/view/main/Main.js，可以看到主視圖是派生于標(biāo)簽面板（Ext.tab.Panel）的。在視圖的標(biāo)簽欄內(nèi)，除了顯示標(biāo)簽外，還顯示了標(biāo)題欄。由于已經(jīng)重新設(shè)計(jì)了標(biāo)題欄，主視圖的標(biāo)簽欄就不需要了，因而先把這個(gè)去掉。

檢查一下代碼，會(huì)發(fā)現(xiàn)代碼中有個(gè)header配置項(xiàng)，根據(jù)API可以知道，該配置項(xiàng)是用來定義面板的標(biāo)題的，因而把這段代碼先去掉。在瀏覽器中刷新一下，會(huì)看到如下圖的效果：

從圖中可以看到，標(biāo)題是去掉了，但還是有問題，再檢查下代碼，會(huì)發(fā)現(xiàn)以下三個(gè)配置項(xiàng)是與標(biāo)題和標(biāo)簽的設(shè)置有關(guān)的：

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

根據(jù)API，可以知道tabBarHeaderPosition是用來指定標(biāo)題欄的位置的，因而可以去掉；titleRotation是用來控制標(biāo)題文本的顯示方向的，這個(gè)也可以去掉；tabRotation是用來控制標(biāo)簽文本的顯示方向的，暫時(shí)保留。

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

從圖中可以看到，標(biāo)題欄已經(jīng)去掉了，但是標(biāo)簽還是在頂部。查一下API，可以找到tabPosition配置項(xiàng)，通過它可以控制標(biāo)簽的位置，因而在代碼中添加以下代碼，讓標(biāo)簽顯示在左邊：

tabPosition: 'left',11

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

從圖中可以看到，目標(biāo)已經(jīng)實(shí)現(xiàn)了。

雖然基本目標(biāo)已經(jīng)達(dá)成，但是否還存在些小疑惑？為什么這個(gè)標(biāo)簽面板的標(biāo)簽顯示與主題所默認(rèn)所顯示的標(biāo)簽（下圖）會(huì)不同？

這是因?yàn)?，在主視圖中使用了自定義的UI，代碼如下：

ui: 'navigation',11

根據(jù)API，ui配置項(xiàng)的作用是用來指定組件的UI樣式，默認(rèn)值是default，也就是使用默認(rèn)的樣式。而在這里，將值指定為了navigation，也就是說，當(dāng)前的標(biāo)簽頁將使用navigation樣式，那么這個(gè)樣式是在哪里定義的呢？

大家打開sass\src\view\main\Main.scss文件，就會(huì)看到navigation的樣式定義了。打開文件后，會(huì)看到如下的一些代碼：

@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

當(dāng)看到以上的東西，一定會(huì)問，這是什么鬼？完全看不懂啊！先別慌，先打開Ext JS 6的API，找到Ext.tab.Panel的說明，然后在工具欄中找到CSS Mixins菜單，選擇extjs-tab-panel-ui，就會(huì)看到下圖說明了：

從圖中的說明可以了解到，“$ui”定義的是UI的名字，“$ui-tab-background-color”就是標(biāo)簽的背景顏色……

根據(jù)模板給的示范，是否會(huì)覺得：其實(shí)修改Ext JS 6的樣式也不算太難呢？
我的意見是不太難，難的在于入門，呵呵。

在主視圖的定義中，還有2個(gè)比較特別的配置項(xiàng)：responsiveConfig和defaults和。他們又有什么作用呢？

在API中直接搜索responsiveConfig并切換到Ext.mixin.Responsive類，就可以知道，該配置項(xiàng)的作用是在指定條件下將應(yīng)用怎樣的顯示，主視圖中的定義說明，在豎向顯示的時(shí)候，標(biāo)題欄將顯示在頂部，而在橫向顯示的時(shí)候，則顯示在左邊。

配置項(xiàng)defaults的作用是用來指定子組件的默認(rèn)配置的，也就是說，在標(biāo)簽面板創(chuàng)建子組件的時(shí)候，會(huì)把defaults中的配置項(xiàng)應(yīng)用到子組件 中。根據(jù)defaults中的配置項(xiàng)，可以了解到，標(biāo)簽頁的內(nèi)容區(qū)域?qū)?huì)向內(nèi)收縮20個(gè)像素（bodyPadding），而每個(gè)標(biāo)簽頁的標(biāo)簽 （tabConfig）將應(yīng)用插件Ext.plugin.Responsive，這樣，就可以實(shí)現(xiàn)在顯示是橫向的時(shí)候，標(biāo)簽將顯示在左邊，顯示是豎向的時(shí) 候，標(biāo)簽顯示在頂部，而且寬度固定為120像素。

由于當(dāng)前項(xiàng)目只基于PC端，因而這兩個(gè)配置項(xiàng)對(duì)當(dāng)前項(xiàng)目來說意義不大，可以刪除。

接下來修改一下標(biāo)簽頁，在當(dāng)前項(xiàng)目需要用到三個(gè)標(biāo)簽頁：用戶管理、文章管理和圖片管理。具體修改代碼如下：

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

這時(shí)候如果刷新瀏覽器，可能會(huì)出現(xiàn)亂碼的情況，這是因?yàn)轫撁娴拇a頁不是Unicode的，因?yàn)樾枰薷囊幌挛募拇a頁。在Visual Studio中，可在文件菜單中選擇“高級(jí)保存選項(xiàng)”，然后如下圖那樣，將編碼設(shè)置為Unicode，再保存就行了。

現(xiàn)在刷新瀏覽器，可看到如下圖的效果：

今天就說到這了，有什么問題或疑問，請(qǐng)加入qq交流群391747779 進(jìn)行咨詢。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

網(wǎng)頁題目：ExtJS6開發(fā)實(shí)例（四）：調(diào)整主視圖-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://www.muchs.cn/article46/dhojeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、定制開發(fā)、企業(yè)網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、微信公眾號(hào)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)