主題和響應式設計
本章重點在 ExtJS 應用的主題和響應式設計。主要有如下幾點內容：css
- SASS 介紹和入門
- 主題
- 響應式設計
SASS 介紹和入門
SASS (Syntactically Awesome Stylesheets) 是一個樣式語言，當你使用 SASS 代替 CSS 來寫樣式，以後 SASS 將使用編譯器編譯成 CSS ，SASS 有更好的語法和一組特性使咱們更容易編寫樣式。同時維護 SASS 代碼比維護 CS 更容易。相比直接寫 CSS 你將寫更少的 SASS 代碼。android
一般在你構建你的應用時，編譯器將會編譯 SASS 爲適用於瀏覽器的 CSS 文件。ios
關於 SASS 的話題超出了本書的範圍。你沒必要知道的太詳細，可是一些基本知識仍是必要的。因此這裏咱們學習 SASS 的最低限度要求的知識。git
你不須要另外的安裝 SASS 編譯器，sencha Cmd 6 已經有了，它使用了新的 SASS 編譯器，叫作 fashion ，你安裝好 sencha Cmd 6 ，它也就已經安裝好了。github
- 若是你使用的是 Ext JS SDK 5 ，那麼你須要安裝 ruby 來編譯 SASS。
SASS 有兩個語法；默認名爲 SCSS 的新語法和舊的 SASS 語法。這裏咱們天然使用最新的。接下來你將瞭解 SASS 的基本知識，例如變量，混合，嵌套。web
變量
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 ，如如下代碼所示。以前定義的變量能夠在多個地方複用：json
|
1
2
3
4
5
|
body {
background: transparent;
font: 100% helvetica , arial , verdana , sans-serif;
color: #808080;
}
|
混合
這就像是 宏 — 由一條指令擴展到多條指令。看下列代碼：windows
|
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 中使用主題。同時咱們還看了響應式設計相關的配置。