定制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 布景,其实要分享是再方便不过的,因为只要把几个主要的基础变量设定分享即可,简单的修改几个变量,就能发现整个主题​​在视觉上有很大的变化。

你可能感兴趣的:(extjs,css)