背景

用過 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:\ExtCoding\ThemingStudy 2 sencha -sdk ext generate app ThemeTest ThemeTest

運行結果

第三步：創建主題

命令行內容

1 cd /d E:\ExtCoding\ThemingStudy\ThemeTest 2 sencha generate theme happy-theme-green

運行結果

第四步：修改主題的“繼承主題”和“Saas 變量”

修改“繼承主題”

修改“Saas 變量”

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

1 $base-color: #745858 !default;

第五步：編譯主題

命令行內容

1 cd /d E:\ExtCoding\ThemingStudy\packages\happy-theme-green 2 sencha package build

運行結果

第六步：App 使用主題，編譯 App

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

1 app.theme=happy-theme-green

編譯 App 使用的命令行內容

1 cd /d E:\ExtCoding\ThemingStudy\ThemeTest 2 sencha app build

第七步：最終運行結果

如何學習 Sass 變量？

備注

再也不怕主題不兼容了，隨著瀏覽器的性能越來越好，看好 ExtJs，不過我有可能要轉 Silverlight 或 WPF 了。

?

轉載于:https://www.cnblogs.com/happyframework/p/3361706.html

總結

以上是生活随笔為你收集整理的ExtJS4.2：自定义主题 入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。