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 中使用主题。同时我们还看了响应式设计相关的配置。