ExtJS 4 測試 (二) : 主題佈景切換 (Look and Feel)

jQuery UI 提供了 24 種主題佈景, 只要匯入不同主題的 CSS 檔就能切換主題 (詳見 : jQuery UI 執行環境配置, 測試範例), ExtJS 也是如此, 在免費的 GPL 4.2.1 版裡, 它在 resources 目錄下提供了四種預置的主題佈景 : classic(預設), neptune (藍), gray (灰), access (黑), ExtJS 描繪出美美外觀的秘密就是在這 resources 目錄下.

在準備本地的 ExtJS 檔案時, 以 4.2.1 版為例, 解開 zip 檔後, 除了 ext-all.js 這個主檔外, 還需要 resources 這目錄下的 css 與 ext-theme-classic 兩個子目錄, 這是 ExtJS 描繪網頁最基本的配備 (只有預設主題背景 classic), 所以如果要在自己的伺服器上自備 ExtJS 框架, 那麼最基本的目錄結構是 :

extjs-4.2.1
    |___ ext-all.js
    |___ resources
                 |___ css
                 |___ ext-theme-classic

這樣大約只需要 3.44MB 的大小, 對於容量有限的主機而言, 這是算輕量級的. 如果要能切換主題佈景, 那麼 resources 下的其他三個子目錄也要上傳主機才行, 其目錄架構如下 :

extjs-4.2.1
    |___ ext-all.js
    |___ resources
                 |___ css
                 |___ ext-theme-classic
                 |___ ext-theme-neptune
                 |___ ext-theme-gray
                 |___ ext-theme-access
                 |___ ext-theme-classic-sandbox
                 |___ themes

可以說, ExtJS 能描繪出美美外觀的秘密就是在這 resources 目錄下了 (themes 與 ext-theme-classix-sandbox 這兩個不需要), 這樣總共約需 9.79MB 大小. 以下我們就以簡單的訊息框來做布景切換測試 :

測試範例 1 : http://tony1966.xyz/test/extjstest/extjstest_look_and_feel.htm [看原始碼]

在範例一中, 我們放置了四個佈景的按鈕, 在事件處理函式中, 呼叫 Ext.util.CSS.swapStyleSheet() 方法, 切換頁面的 css 布景檔案, 例如下列為切換至 neptune 主題的程式碼 :

      var neptune=new Ext.Button({
          text : "Neptune",
          width : 100,
          renderTo : Ext.getBody(),
          handler : function() {
            var url="extjs-4.2.1/resources/css/ext-all-neptune.css";
            Ext.util.CSS.swapStyleSheet("theme",url);
            }
          });


參考資料 :
# Change the theme and align right
# Easy way For Applying themes