Ext JS 6學習文檔-第8章-主題和響應式設計
主題和響應式設計
本章重點在 ExtJS 應用的主題和響應式設計。主要有以下幾點內容：
- SASS 介紹和入門
- 主題
- 響應式設計
SASS 介紹和入門
SASS (Syntactically Awesome Stylesheets) 是一個樣式語言，當你使用 SASS 代替 CSS 來寫樣式，之后 SASS 將使用編譯器編譯成 CSS ，SASS 有更好的語法和一組特性使我們更容易編寫樣式。同時維護 SASS 代碼比維護 CS 更容易。相比直接寫 CSS 你將寫更少的 SASS 代碼。
通常在你構建你的應用時，編譯器將會編譯 SASS 為適用於瀏覽器的 CSS 文件。
關於 SASS 的話題超出了本書的范圍。你不必知道的太詳細，但是一些基本知識還是必要的。所以這里我們學習 SASS 的最低限度要求的知識。
你不需要另外的安裝 SASS 編譯器，sencha Cmd 6 已經有了，它使用了新的 SASS 編譯器，叫做 fashion ，你安裝好 sencha Cmd 6 ，它也就已經安裝好了。
- 如果你使用的是 Ext JS SDK 5 ，那么你需要安裝 ruby 來編譯 SASS。
SASS 有兩個語法；默認名為 SCSS 的新語法和舊的 SASS 語法。這里我們自然使用最新的。接下來你將了解 SASS 的基本知識，例如變量，混合，嵌套。
變量
CSS 不支持變量。這一點 SASS 可以，SASS 變量可以存儲例如顏色，字體或者任意的你想要重用的 CSS 值。看一看下列代碼：
|
1
2
3
4
5
6
7
|
$body-background-color: transparent; $base-color: #808080;
$font-family: helvetica , arial , verdana , sans-serif;
body {
background: $body-background-color;
font: 100% $font-family;
color: $base-color;
}
|
上面的代碼在處理后，將輸出為正常的 CSS ，如以下代碼所示。之前定義的變量可以在多個地方復用：
|
1
2
3
4
5
|
body {
background: transparent;
font: 100% helvetica , arial , verdana , sans-serif;
color: #808080;
}
|
混合
這就像是 宏 — 由一條指令擴展到多條指令。看下列代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
a.button {
background: black;
color: white;
padding: 10px 20px;
@include border-radius(10px);
}
|
上面的 SCSS 代碼輸出后就是下列的代碼：
|
1
2
3
4
5
6
7
8
9
|
a.button {
background: black;
color: white;
padding: 10px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
|
嵌套
不同於 HTML ，CSS 不支持 CSS 選擇器的嵌套。SASS 允許你這么做。
使用 CSS 你要這樣寫代碼：
|
1
2
3
4
5
6
7
8
9
10
11
|
.table {
background: blue;
}
.table .col {
padding: 10px;
}
.table .row .col {
color: red;
}
|
在 SASS 中，你可以這樣寫，這有點像鏈式編程：
|
1
2
3
4
5
6
7
8
9
10
|
.table {
background: blue;
.col {
padding: 10px;
.row {
color: white;
}
}
}
|
主題
Ext JS 制作主題是很容易且便於維護的，能讓你很輕松的從現有主題進行擴展。
首先需要建立一個工作空間，運行下列命令在當前目錄的 myapp 文件夾里生成應用：
|
1
|
sencha -sdk <path to SDK> generate app MyApp ./myapp
|
Ext JS 提供了一組主題，你可以選擇其中之一或者拖過擴展 sencha 提供的主題來創建你自己的主題。
默認 sencha Cmd 6 使用 theme-neptune 主題，你可以在之前生成的 MyApp 應用中的 app.json 文件里找到以下代碼。在這里你可選擇切換現代和經典工具包所使用的主題：
|
1
2
3
4
5
6
7
8
9
10
|
"builds": {
"classic": {
"toolkit": "classic",
"theme": "theme-triton"
},
"modern": {
"toolkit": "modern",
"theme": "theme-neptune"
}
}
|
- 如果你使用是 Ext JS 5 ，文件里的代碼就不是上面那樣，而是如下所示：
1"theme": "ext-theme-neptune" - 在 Ext JS 6 以前，所有的主題的名稱前綴都是 ext- ，在 Ext JS 6 中這樣的前綴被移除了。
如果你想切換到其他的內置主題，只需要修改 theme 為你想要的主題的名稱就行了。嘗試一下，刷新頁面看看有何不同。
創建自定義主題
首先我們先來運行 MyApp 應用，執行下列命令：
|
1
|
sencha app watch
|
應用將會運行在 http://localhost:1841 (默認地址).
下列截圖是使用默認的主題 theme-neptune 的輸出結果：
我們在 MyApp 應用中定制並生成自己的主題。
第一步在應用的目錄下，運行下列命令生成自定義主題：
|
1
|
sencha generate theme my-theme
|
如果你現在查看應用文件夾下的 packages 目錄，你會發現已經生成了 my-theme 下列是文件夾里的內容：
我們來看一下這里面的一些文件和文件夾的用途：
- package.json: 這個文件里有所有的配置和包的屬性
- sass/var: 這個目錄中包含所有的 SASS 變量
- sass/src: 這里是所有的 SASS 規則和混合
- sass/etc: 這里包含一些通用的函數和混合
- resources: 主題所使用的圖片和其他的靜態資源
- overrides: 這個目錄包含了使用 JavaScript 復寫的主題（例如你想覆蓋 panel 的主題，就在這里寫）
這里，你的組件的樣式文件和文件路徑，應在 sass/var/ ， sass/src ，和 overrides 文件夾結構中與你的組件包路徑是匹配的。例如，如果要使用變量改變 Ext.panel.Panel 的樣式，那么就應該在 sass/var/ 目錄下創建 panel 文件夾，並在 panel 目錄里建立名為 Panel.scss 的文件。將變量寫在這個文件里。
下一步，我們要決定需要擴展哪些主題。Ext JS 6 有兩套主題：一套經典的，一套現代的。這些主題如下圖所示。除了 Base 和 Neutral 你可以基於任意主題擴展：
當你生成一個自定義主題，默認它是使用 theme-classic 。現在切換為 theme-crisp 。更新 packages/local/my-theme/package.json 文件中的
“extend”: “theme-classic”,
替換為
“extend”: “theme-crisp”,
- 生成主題的命令還可以接受一個可選的參數來選擇基於何種主題進行擴展。如果你不指定參數，那么它將繼承自 theme-classic 。
接下來，完成下列的幾項：
- 配置 SCSS 變量
- 創建 SCSS 規則和混合
- 覆蓋圖片
- 覆蓋 JavaScript 樣式
SASS 變量
Ext JS 已經定義了一大堆的 SASS 變量，你可以根據你的需求定制覆蓋他們。現在我們來更新一些全局的變量。在 var 目錄下，創建一個文件名為component.scss 並添加下列代碼：
|
1
2
3
4
5
|
$base-color: #F17C26 !default;
$color: #404040 !default;
$font-size: 15px !default;
|
這個 !default 是必須的，作用是允許它被覆蓋。這里我找個一個圖解釋了為什么需要加 !default
現在在瀏覽器刷新頁面，將會呈現下面的應用：
使用 SASS 混合來新建一個組件 UI
你應該做的第一件事是嘗試你是否能夠通過只用變量來做到。在大多數情況下，變量都能幫助做到自定義 UI 。有時，這可能是不夠的。只有在這種情況下，可以考慮創建組件UI和混入。
在 Ext JS 中大部分組件都定義了 SASS 混合；你可以調用這些混合來生成新的組件 UI 。大多數組件在 Ext JS 中都有組件的 UI ，它們默認情況下都使用一個默認的 UI ，你可以創建自己的組件的 UI 並且使用它們。
例如，我們創建了一個自定義的 panel UI 。在目錄 my-theme/sass/src/panel/ 下創建一個名為 Panel.scss 的文件並鍵入下列代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@include extjs-panel-ui(
$ui: 'dark',
$ui-header-background-color: #404040,
$ui-border-color: #404040,
$ui-body-background-color: #404040,
$ui-body-border-color: #404040
) ;
|
現在你可以使用這個 UI 了，如以下代碼所示：
|
1
2
3
4
5
|
Ext.define('MyApp.view.main.MyPanel', {
extend : 'Ext.panel.Panel',
xtype : 'my-panel',
ui : 'dark',
});
|
@include 這是用來調用聲明的混合的，設置的 ui 就是一個參數，然后在組件中應用了 ui 屬性之后，組件在渲染時就會以 ui 屬性作為組件 body 內 dom 元素的 id ，而上面應用的樣式對 ui 的定義也會相應生效。
覆蓋 JavaScript 樣式
極少數情況下，你可能要改變外觀，只能在JS來完成。在這種情況下，你可以使用 JS 覆蓋。例如在 my-theme\overrides\panel\ 目錄下創建名為Panel.js 的文件，然后鍵入以下代碼，刷新應用查看有何不同：
|
1
2
3
4
5
|
Ext.define('my-theme.panel.Panel', {
override : 'Ext.panel.Panel',
titleAlign : 'center',
padding : 20
});
|
以上代碼的輸出如下，你會發現右邊 grid 的 padding 距離明顯增大了好多：
圖片
在你的主題里你也可以很容易的自定義圖標，把圖片放在 my-theme\resources\images\ 目錄下即可，圖片必須和所替換的應用相同的文件名。
設計你的應用的樣式
你學會了在主題中為你的應用的特定需求設計樣式，如果你想明確的為 classic/src/view/main/Main.js 設置一個變量，那么你需要添加一個 scss 文件，名為 classic/sass/src/view/main/Main.scss 並在文件中設置變量，你可以添加 SASS ，CSS 樣式，以及你也可以添加混合，創建特定的組件 UI 。
- 任意的 CSS 都是有效的 SCSS ，所以 SCSS 文件中可以是純 CSS 代碼。
Sencha Cmd 已經為視圖 classic/src/view/main/Main.js 生成了 classic/sass/src/view/main/Main.scss 文件。並且你會發現下列代碼。同樣，你可以在文件中為 Main.js 寫任意的樣式代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
@include extjs-panel-ui(
$ui: 'navigation',
$ui-header-color: #fff,
$ui-header-glyph-color: #fff,
$ui-header-glyph-opacity: 1,
$ui-header-font-size: 20px,
$ui-header-line-height: 24px,
$ui-header-font-weight: bold,
$ui-header-icon-height: 24px,
$ui-header-icon-width: 24px,
$ui-header-icon-spacing: 15px,
$ui-header-background-color: $base-color,
$ui-header-padding: 0,
$ui-header-text-margin: 36px,
$ui-header-noborder-adjust: false
) ;
.x-tab-icon-el-navigation {
font-family: FontAwesome;
color: #acacac;
.x-tab-over & {
color: #c4c4c4;
}
.x-tab-active & {
color: #fff;
}
}
|
將一個應用程序之間共享的樣式應放置在該主題，而不是在這里。
如果你的樣式，混合或變量沒有指定到對應的視圖，那么你可以放置到 /sass/etc/all.scss 。例如，如果你想覆蓋基本的顏色，在 /sass/etc/all.scss 中寫入下列代碼：
|
1
|
$base-color: #404040;
|
響應式設計
通過 Sencha Cmd 生成的應用默認是響應式的。你可以嘗試調整應用的大小，你會發現左側的 panel 移動到了頂部，顯示如以下截圖：
如果你查看 classic\src\view\main\Main.js ，將看到以下代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
responsiveConfig: {
tall: {
headerPosition: 'top'
},
wide: {
headerPosition: 'left'
}
} ,
defaults: {
bodyPadding: 20,
tabConfig: {
plugins: 'responsive',
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left'
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120
}
}
}
}
|
responsiveConfig （響應式配置）
Ext JS 提供了 responsiveConfig 能動態的根據屏幕大小來進行響應。這是一個對象使用 key 表示條件，這些條件不滿足時，某些配置將會被應用。
默認組件不支持響應式。為類定義或組件實例添加下列應用：
plugins: ‘responsive’
一下變量是可以用於 responsiveConfig 規則：
- landscape: 如果設備方向是橫向此項設置為 true ，在桌面設備上此項永遠為 true 。
- portrait: 如果設備方向是縱向此項設置為 true ，此項在桌面設備上永遠為 true 。
- tall: 如果寬度小於高度時此項設置為 true ，不考慮設備的類型。
- wide: 如果寬度大於高度此項設置為 true ，不考慮設備的類型。
- width: 這表示瀏覽器窗口的寬度。
- height: 這表示瀏覽器窗口的高度。
這里你可以看到 iconAlign 和 textAlign 在 wide 和 tall 中的值是不同的，並且 tall 中僅設置了寬度，如果寬度小於高度，那么這個配置將會被應用；否則將會使用正常的配置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
tabConfig: {
plugins: 'responsive',
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left'
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120
}
}
}
|
這些規則也可以很復雜，例如下列代碼，第一個規則檢查兩個條件，寬度小於 768 並且寬度小於高度時：
|
1
2
3
4
5
6
7
8
|
responsiveConfig: {
'width < 768 && tall': {
visible: true
},
'width >= 768': {
visible: false
}
}
|
同樣的，你也可以使用 platformConfig ，如以下代碼所示：
|
1
2
3
4
5
6
7
8
|
platformConfig: {
'windows || desktop': {
visible: true
},
android && ios: {
visible: false
}
}
|
在上面的代碼中，Ext. platformTags 配置了 Windows ，desktop ，Android ，iOS 。也包含一些其他的平台 phone ，Firefox ，Chrome ，Safari ，觸摸，平板等等。
總結
在本章中，你學習了SASS 的基礎。我們也充分理解了如何在 Ext JS 中使用主題。同時我們還看了響應式設計相關的配置。