Ext JS 6学习文档-第8章-主题和响应式设计

主题和响应式设计

本章重点在 ExtJS 应用的主题和响应式设计。主要有如下几点内容：

• SASS 介绍和入门
• 主题
• 响应式设计

转载请注明出处：http://www.jeeboot.com/archives/1231.html

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