定制ExtJS 4.1主题

定制ExtJS4.1主题   Compass/Sass

在ExtJS 2.0-3.0 的时代，搜寻一下就可以找到不少主题（themes），例如：

• http://www.sencha.com/learn/extensions-and-themes
• http://www.akawebdesign.com/2009/08/27/extjs-3-0-themes/

但是到了ExtJS 4.x，即使4.1 已经正式发布，还是很难找到官方以外的主题。

目前ExtJS 4.1 可用的布景选项有：

• Default（淡蓝色）
• Gray（灰色）
• Neptune

虽然ExtJS 4.1 很难找到现成、好看的布景，但其实ExtJS 从4.x 开始加入更现代化的Sass（ Syntactically Awesome Stylesheets）支持，使得ExtJS 4.x 的主题更容易依照客户的特殊需求进行定制。

ExtJS 4.x内建的主题都是采用 Sass  语法撰写，并且以 Compass为基础，打造样式定义出可重复利用、易扩充的主题。

Sass 简单说就是增强版的CSS 语法，它可以做到过去CSS 不可能做的事情：定义变数、宣告函式、巢状样式定义、尺寸单位及颜色的计算...等。

ExtJS 本身并没有附带Compass/Sass 工具，需要扩充主题（Theming）的开发者，需要依循Ruby 惯用的RubyGems 安装方式：

gem install compass

将Compass/Sass 软件安装，之后才能开始定制ExtJS 的主题。

这两篇文章可供布景开发者参考：

• http://existdissolve.com/2011/09/extjs-4-theming-getting-this-thing-to-go/
• http://www.rallydev.com/engblog/2011/10/07/a-guide-to-custom-themes-in-extjs-4/

由于Compass 定义的布景，有很多扩充方式，但也经常让初学者摸不着边际，所以这篇文章稍微整理一下相关说明。

假设定制项目的根路径是：MyApp

ExtJS 解压缩后放置的路径是：MyApp/extjs

所有主题相关的档案都会放在：MyApp/extjs/resources

定制布景会需要用到resources/themes/templates/resources/sass/ 文件夹底下的两个档案：

1. config.rb
2. my-ext-theme.scss

其中config.rb 是ExtJS 为主题开发者准备好的Compass 设定范本，因此ExtJS 的主题并不是从一般的compass create 开始建立，而是直接套用现成的设定档（因为主题产生过程会用到ExtJS 定义的预设样式及Ruby 撰写的处理程序）。

此时先在ExtJS文件夹下建立命名为custom 的文件夹：MyApp/extjs/custom

再将定制档案复制：cp extjs/resources/themes/templates/resources/sass/* extjs/custom

新文件夹custom 的名称可自定，但路径必须在extjs 下（与resources 同一层），这是因为config.rb 里面用的相对路径设定；如果放到其他路径就必须重新调整设定值。

接着切换到新文件夹下：cd extjs/custom

使用Compass 编译布景的方式有两种：

1. 直接编译compass compile
2. 动态编译compass watch .

如果主题还在调整的阶段，使用watch 可以免去每次修改都要重新输入compile 指令的麻烦。

其中my-ext-theme.css 的内容就是定制主题的内容，如果都没有修改的情况下，就会产生ExtJS 预设的样式，也就是淡蓝色的布景。

在my-ext-theme.css 的内容有一段注解：

// Insert your custom variables here.

在此注解下方就是用来定义新的主题，但样例并没有提供任何设定可参考。

所以这边可以先找到ExtJS 预设主题的样式定义： MyApp/extjs/resources/sass/ext-all-gray.scss

把里面的相关变量声明复制到my-ext-theme-css 的定义区。例如：

$theme-name: 'gray';

$base-color: #ccc;

从这个例子中可以看到，预设的Gray（浅灰）布景，其实就是利用$base-color 来定义基础颜色，#ccc 颜色值就是浅灰色。

如果把#ccc 改成其他颜色，例如：

$base-color: #ff0000;

上面的修改会让布景从灰色变成红色。

从这边就能看到ExtJS 采用Compass/Sass 布景的好处，只改了一行，但整个布景主题会从灰色转变为红色，因为利用了Compass/Sass 的颜色计算功能，在Ext 各式视窗组件都会依照这个基础色码进行深浅度的自动调整。

另一个修改的例子是字型大小，再过去调整ExtJS 的字型大小相当麻烦，因为不能只改一个或少数几的地方，若是想加大整体的字型大小，必须把全部字型大小的设定都修改过，才能维持原有的比例，例如13px 调到15px，那么11px 就应该调为13px 等，...

但是在ExtJS 4.x 的Compass/Sass 布景系统中，只要在.scss 布景设定中设定一行：

$font-size: 11pt;

其他相关的字型大小，就会以11pt 为基础重新计算新的大小，因此能保持布景原有的字型大小比例。

在compass compile 动作后，会将.scss 档案自动产生对应档名的.css，其预设路径为： MyApp/extjs/css

有了设计好的新布景之后，在HTML 的link 标签也要替换路径，将原本使用预设布景的位址，例如：

/extjs/resources/css/ext-all-gray.css

替换为定制产生的新布景档：

/extjs/css/my-ext-theme.css

虽然使用Compass/Sass 的布景设计，对仍旧习惯CSS 的开发者来说，刚开始要上手一点门槛，但其实只要多尝试一下，就会发现Compass/Sass 真是网页开发者的福音，试过就. ..再也回不去了。

虽然目前还没有看到太多ExtJS 4.x 的布景分享，但是基于Compass/Sass 设计的ExtJS 布景，其实要分享是再方便不过的，因为只要把几个主要的基础变量设定分享即可，简单的修改几个变量，就能发现整个主题​​在视觉上有很大的变化。