背景
用过 ExtJs 的朋友都有一种趋势：审美疲劳，好在 Ext4.1 之后的版本提供了快速自定义主题的功能，本文的内容主要来自：http://docs.sencha.com/extjs/4.2.2/#!/guide/theming，我记录下来是为了强化一下。
安装环境
- JRE：http://www.oracle.com/technetwork/java/javase/downloads/index.html。
- Ruby：http://rubyinstaller.org/。
- Sencha-Cmd：http://www.sencha.com/products/sencha-cmd/download。
- Ext Js：http://www.sencha.com/products/extjs/。
自定义主题
第一步：创建 Workspace
命令行内容
1 cd /d E:ExtCoding 2 sencha -sdk ext-4.2 generate workspace ThemingStudy
运行结果
第二步：创建 App
命令行内容
1 cd /d E:ExtCodingThemingStudy 2 sencha -sdk ext generate app ThemeTest ThemeTest
运行结果
第三步：创建主题
命令行内容
1 cd /d E:ExtCodingThemingStudyThemeTest 2 sencha generate theme happy-theme-green
运行结果
第四步：修改主题的“继承主题”和“Saas 变量”
修改“继承主题”
修改“Saas 变量”
增加文件：E:ExtCodingThemingStudypackageshappy-theme-greensassvarComponent.scss
1 $base-color: #745858 !default;
第五步：编译主题
命令行内容
1 cd /d E:ExtCodingThemingStudypackageshappy-theme-green 2 sencha package build
运行结果
第六步：App 使用主题，编译 App
在 E:ExtCodingThemingStudyThemeTest.senchaappsencha.cfg 中修改如下内容：
1 app.theme=happy-theme-green
编译 App 使用的命令行内容
1 cd /d E:ExtCodingThemingStudyThemeTest 2 sencha app build
第七步：最终运行结果
如何学习 Sass 变量？
备注
再也不怕主题不兼容了，随着浏览器的性能越来越好，看好 ExtJs，不过我有可能要转 Silverlight 或 WPF 了。