ExtJS4.2：自定義主題 入門

背景

用過 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: #745858 !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 了。