背景

用过 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

命令行内容

 cd /d E:\ExtCoding

 sencha -sdk ext-4.2 generate workspace ThemingStudy

运行结果

第二步：创建 App

命令行内容

 cd /d E:\ExtCoding\ThemingStudy

 sencha -sdk ext generate app ThemeTest ThemeTest

运行结果

第三步：创建主题

命令行内容

 cd /d E:\ExtCoding\ThemingStudy\ThemeTest

 sencha generate theme happy-theme-green

运行结果

第四步：修改主题的“继承主题”和“Saas 变量”

修改“继承主题”

修改“Saas 变量”

增加文件：E:\ExtCoding\ThemingStudy\packages\happy-theme-green\sass\var\Component.scss

 $base-color: # !default;

第五步：编译主题

命令行内容

 cd /d E:\ExtCoding\ThemingStudy\packages\happy-theme-green

 sencha package build

运行结果

第六步：App 使用主题，编译 App

在 E:\ExtCoding\ThemingStudy\ThemeTest\.sencha\app\sencha.cfg 中修改如下内容：

 app.theme=happy-theme-green

编译 App 使用的命令行内容

 cd /d E:\ExtCoding\ThemingStudy\ThemeTest

 sencha app build

第七步：最终运行结果

如何学习 Sass 变量？

备注

再也不怕主题不兼容了，随着浏览器的性能越来越好，看好 ExtJs，不过我有可能要转 Silverlight 或 WPF 了。

巴特西

ExtJS4.2：自定义主题入门

背景

安装环境

自定义主题

第一步：创建 Workspace

第二步：创建 App

第三步：创建主题

第四步：修改主题的“继承主题”和“Saas 变量”

第五步：编译主题

第六步：App 使用主题，编译 App

第七步：最终运行结果

如何学习 Sass 变量？

备注

最新文章

热门文章

巴特西

ExtJS4.2：自定义主题 入门

背景

安装环境

自定义主题

第一步：创建 Workspace

第二步：创建 App

第三步：创建主题

第四步：修改主题的“继承主题”和“Saas 变量”

第五步：编译主题

第六步：App 使用主题，编译 App

第七步：最终运行结果

如何学习 Sass 变量？

备注

最新文章

热门文章

ExtJS4.2：自定义主题入门