ExtJS4+SASS自定义主题

参见《Ext JS 权威指南》

ExtJS4可以结合SASS和Compass来创建自己的主题，再次简单介绍其使用方法。关于SASS和Compass参见其相关官网：http://sass-lang.com/和http://compass-style.org/

1.安装Ruby

使用SASS和Compass需要安装Ruby,到官网http://rubyinstaller.org下载安装，本例用的是“rubyinstaller-1.9.3-p551.exe”。

2.安装Compass

Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。在“开始”菜单下单击“Start Command Prompt with Ruby”，安装“0.11.5”版本，命令行输入“gem install compass –v0.11.5”

安装以后可以用命令“compass -v”查看版本

3.安装SASS（版本3.1.7）

在命令行输入“geminstall sass –v3.1.7”，安装成功后可以使用命令“sass -v”查看版本。

4.ExtJS目录结构

主题的编译过程所对应的目录结构要求比较严格。编译过程是以网站跟目录或者应用根目录为基准，如下图：

ExtJS文档下放置的是相关的js，resources以及下面的主题样式。ExtJs\resources\themes下的compass_init.rb必须存在，ExtJS\resources\themes\stylesheets\ext4\defaul下面都是.scss文件存放Extjs组件相关的样式变量。和ExtJS文档同级的的resources文档下面有三个文档。Nicole\WebRoot\resources\images是由Nicole\WebRoot\ExtJS\resources\themes\images复制得来。

（2）修改配置文件

修改Nicole\WebRoot\resources\sass\config.rb文件，配置 Ext JSSDK对应项目的路径

修改Nicole\WebRoot\resources\sass\my-ext-theme.scss文件，该文件是主题的模本文件，通过修改可以对主题进行配置。

5.编译

  打开Ruby的命令提示窗口，将目录切换到项目的目录下，如本例“E:\testwork\Nicole\WebRoot\resources\sass”在窗口输入“compass compile”，可以看到Nicole\WebRoot\resources\css\下生成一个my-ext-theme.css文件。在项目中引用这个文件就可以了。