客製化 ExtJS 4.1 佈景主題小筆記 Compass/Sass

在 ExtJS 2.0-3.0 的時代，搜尋一下就可以找到不少佈景主題（themes），例如：

• http://www.sencha.com/learn/extensions-and-themes
• http://www.akawebdesign.com/2009/08/27/extjs-3-0-themes/

但是到了 ExtJS 4.x，即使 4.1 已經正式發佈，還是很難找到官方以外的佈景主題。

目前 ExtJS 4.1 可用的佈景選項有：

• Default（淡藍色）
• Gray（灰色）
• Neptune

雖然 ExtJS 4.1 很難找到現成、好看的佈景，但其實 ExtJS 從 4.x 開始加入更現代化的 Sass（ Syntactically Awesome Stylesheets）支援，使得 ExtJS 4.x 的佈景主題更容易依照專案的特殊需求進行客製。

ExtJS 4.x 內建的佈景都是採用 Sass 語法撰寫，並且以 Compass 為基礎，打造樣式定義出可重複利用、易擴充的佈景。

Sass 簡單說就是增強版的 CSS 語法，它可以做到過去 CSS 不可能做的事情：定義變數、宣告函式、巢狀樣式定義、尺寸單位及顏色的計算...等。

ExtJS 本身並沒有附帶 Compass/Sass 工具，需要擴充佈景（Theming）的開發者，需要依循 Ruby 慣用的 RubyGems 安裝方式：

gem install compass

將 Compass/Sass 軟體安裝，之後才能開始客製 ExtJS 的佈景。

這兩篇文章可供佈景開發者參考：

• http://existdissolve.com/2011/09/extjs-4-theming-getting-this-thing-to-go/
• http://www.rallydev.com/engblog/2011/10/07/a-guide-to-custom-themes-in-extjs-4/

由於 Compass 定義的佈景，有很多擴充方式，但也經常讓初學者摸不著邊際，所以這篇文章稍微整理一下相關說明。

假設專案根路徑是：MyApp

ExtJS 解壓縮後放置的路徑是：MyApp/extjs

所有佈景主題相關的檔案都會放在：MyApp/extjs/resources

客製佈景會需要用到 resources/themes/templates/resources/sass/ 範本資料夾底下的兩個檔案：

1. config.rb
2. my-ext-theme.scss

其中 config.rb 是 ExtJS 為佈景開發者準備好的 Compass 設定範本，因此 ExtJS 的佈景並不是從一般的 compass create 開始建立，而是直接套用現成的設定檔（因為佈景產生過程會用到 ExtJS 定義的預設樣式及 Ruby 撰寫的處理程式）。

此時先在 ExtJS 資料夾下建立命名為 custom 的資料夾：MyApp/extjs/custom

再將範本檔案複製：cp extjs/resources/themes/templates/resources/sass/* extjs/custom

新資料夾 custom 的名稱可自訂，但路徑必須在 extjs 下（與 resources 同一層），這是因為 config.rb 裡面用的相對路徑設定；如果放到其他路徑就必須重新調整設定值。

接著切換到新資料夾下：cd extjs/custom

使用 Compass 編譯佈景的方式有兩種：

1. 直接編譯 compass compile
2. 監看異動編譯 compass watch .

如果佈景還在調整的階段，使用 watch 可以免去每次修改都要重新輸入 compile 指令的麻煩。

其中 my-ext-theme.css 的內容就是客製佈景的內容，如果都沒有修改的情況下，就會產生 ExtJS 預設的樣式，也就是淡藍色的佈景。

在 my-ext-theme.css 的內容有一段註解：

// Insert your custom variables here.

在此註解下方就是用來定義新的佈景，但範本檔並沒有提供任何設定可參考。

所以這邊可以先找到 ExtJS 預設佈景的樣式定義： MyApp/extjs/resources/sass/ext-all-gray.scss

把裡面的相關變數宣告複製到 my-ext-theme-css 的定義區。例如：

$theme-name: 'gray';

$base-color: #ccc;

從這個例子中可以看到，預設的 Gray（淺灰）佈景，其實就是利用 $base-color 來定義基礎顏色，#ccc 顏色值就是淺灰色。

如果把 #ccc 改成其他顏色，例如：

$base-color: #ff0000;

上面的修改會讓佈景從灰色變成紅色。

從這邊就能看到 ExtJS 採用 Compass/Sass 佈景的好處，只改了一行，但整個佈景主題會從灰色轉變為紅色，因為利用了 Compass/Sass  的顏色計算功能，在 Ext 各式視窗元件都會依照這個基礎色碼進行深淺度的自動調整。

另一個修改的例子是字型大小，再過去調整 ExtJS 的字型大小相當麻煩，因為不能只改一個或少數幾的地方，若是想加大整體的字型大小，必須把全部字型大小的設定都翻修過，才能維持原有的比例，例如 13px 調到 15px，那麼 11px 就應該調為 13px 等，...

但是在 ExtJS 4.x 的 Compass/Sass 佈景系統中，只要在 .scss 佈景設定中設定一行：

$font-size: 11pt;

其他相關的字型大小，就會以 11pt 為基礎重新計算新的大小，因此能保持佈景原有的字型大小比例。

在 compass compile 動作後，會將 .scss 檔案自動產生對應檔名的 .css，其預設路徑為： MyApp/extjs/css

有了設計好的新佈景之後，在 HTML 的 link 標籤也要替換路徑，將原本使用預設佈景的位址，例如：

/extjs/resources/css/ext-all-gray.css

替換為客製產生的新佈景檔：

/extjs/css/my-ext-theme.css

雖然使用 Compass/Sass 的佈景設計，對仍舊習慣 CSS 的開發者來說，剛開始要上手一點門檻，但其實只要多嘗試一下，就會發現 Compass/Sass 真是網頁開發者的福音，試過就...再也回不去了。

雖然目前還沒有看到太多 ExtJS 4.x 的佈景分享，但是基於 Compass/Sass 設計的 ExtJS 佈景，其實要分享是再方便不過的，因為只要把幾個主要的基礎變數宣告設定分享即可，簡單的修改幾個變數，就能發現整個佈景在視覺上有很大的變化。