Ext JS 6学习文档-第8章-主题和响应式设计
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 中使用主题。同时我们还看了响应式设计相关的配置。
Ext JS 6学习文档-第8章-主题和响应式设计的更多相关文章
- Ext JS 6学习文档-第7章-图表
Ext JS 6学习文档-第7章-图表 使用图表 本章中将探索在 ExtJS 中使用不同类型的图表并使用一个名为费用分析的示例项目结束本章所学.以下是将要所学的内容: 图表类型 条形图 和 柱形图 图 ...
- Ext JS 6学习文档-第6章-高级组件
Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为 图片浏览器,它使用 tree 和 data view 组 ...
- Ext JS 6学习文档-第5章-表格组件(grid)
Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...
- Ext JS 6学习文档-第4章-数据包
Ext JS 6学习文档-第4章-数据包 数据包 本章探索 Ext JS 中处理数据可用的工具以及服务器和客户端之间的通信.在本章结束时将写一个调用 RESTful 服务的例子.下面是本章的内容: 模 ...
- Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
- Ext JS 6学习文档–第2章–核心概念
核心概念 在下一章我们会构建一个示例项目,而在这之前,你需要学习一些在 Ext JS 中的核心概念,这有助于你更容易理解示例项目.这一章我们将学习以下知识点: 类系统,创建和扩展类 事件 Ext JS ...
- Sencha Cmd 6 和 Ext JS 6 指南文档(部分官方文档中文翻译)
近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档 ( ...
- 2013 最新的 play web framework 版本 1.2.3 框架学习文档整理
Play framework框架学习文档 Play framework框架学习文档 1 一.什么是Playframework 3 二.playframework框架的优点 4 三.Play Frame ...
随机推荐
- Swift_ScrollView _ API详解
Swift_ScrollView _ API详解 GitHub class ViewController: UIViewController,UIScrollViewDelegate { var sc ...
- QT 防止FTP 上传软件在断连处 Crash
前段时间发现项目中的上传FTP软件有可能会在从服务器申请断连时Crash, 所以加了一个Timer. 由于项目代码行数过大, 此处上传部分代码片段. timeoutTimer = new QTimer ...
- html5 video获取当前时间和视频总时间长度
html: <video id="video-active" class="video-active" width="640" hei ...
- 第8章 ZooKeeper操作
目录 8.1 集群环境搭建 1.上传ZooKeeper安装文件 2.编写配置文件 3.拷贝ZooKeeper安装信息到其它节点 4.修改其它节点配置 5.启动ZooKeeper 6.查看启动状态 7. ...
- stm32串口发送数据复位 第一个数据丢失
http://blog.csdn.net/kevinhg/article/details/40991655 STM32串口发送必须先检测状态,否则第一个字节无法发出,发送完毕,必须检测发送状态是否完成 ...
- A1092
可输入内容为0-9,a-z,A-Z. 输入: 第一行输入任意字符串: 第二行输入期望字符串. 输出: 如果第一行包含了所有期望字符串,输出yes和多余字符个数: 如果第一行不能完全包含期望字符串,输出 ...
- 清华大学《C++语言程序设计进阶》线上课程笔记06---继承、派生、多态性
类的继承 保持已有类的特性而构造新类的过程称为继承; 实现设计与代码的重用. 在已有类的基础上新增自己的特性而产生新类的过程称为派生 当新的问题出现,原有程序无法解决(或不能完全解决)时,需要对原有程 ...
- 北京Uber优步司机奖励政策(2月25日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 成都Uber优步司机奖励政策(2月23日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Java >>>运算符 和 >> 运算符
>>> 在java 表示有符号右移.什么意思呢?就是最高位符号位也会移动. 我们知道,>>表示有符号右移. -1>> 1 = -1 -1>>2 = ...