本文基於Ext JS 4.2.1版本
UI組件基礎
學習ExtJS就是學習組件的使用。ExtJS4對框架進行了重構，其中最重要的就是形成了一個結構及層次分明的組件體系，由這些組件形成了Ext的控件。
ExtJs4的組件體系中有將近100種組件，而這些組件又可以大致分為四大類，即容器類組件、工具欄及菜單欄組件、表單及元素組件、其他組件。
theme主題
ExtJs4引入了全新的主題系統，采用Sass和Compass技術，提供了標准的主題模板，通過對主題模板的簡單定制就可以創造出豐富多彩的各種主題。
Sass和Compass概述
Sass
Sass樣式表語言是CSS的一個擴展，為CSS提供了變量、內嵌規則、混入（mixins）、選擇器繼承等特性，在最新的Sass3中100%兼容CSS3，語法文件也升級為SCSS（Sassy CSS），每一個有效的CSS3文件也是有效的SCSS文件，這種兼容性降低了學習成本，開發人員可以平穩的由CSS過渡到Sass的開發。
Sass樣式表語言為CSS級聯樣式表提供了編程的能力，現在我們可以在Sass中定義變量在不同的樣式中引用甚至進行計算，定義混入（mixins）在不同的地方進行復用，這些能力都是CSS所不具有的，經過編譯之後Sass會輸出標准的CSS文件在不同的浏覽器中使用。
Sass特性：
混入(Mixins)——class中的class；
參數混入——可以傳遞參數的class，就像函數一樣；
嵌套規則——Class中嵌套class，從而減少重復的代碼；
運算——CSS中用上數學；
顏色功能——可以編輯顏色；
名字空間(namespace)——分組樣式，從而可以被調用；
作用域——局部修改樣式；
JavaScript 賦值——在CSS中使用JavaScript表達式賦值。
Sass的詳細介紹和說明可見：http://sass-lang.com/
Compass
Compass是一個基於Ruby的、開源的、用於CSS創作的框架。它使用Sass樣式表語言，可以非常容易和高效地構造樣式表，同時，Compass內置了大量Web開發中可重用的優秀模式，以便開發者使用。下面用一個簡單的等式來展示Compass所發揮的作用：
Compass = Sass樣式表語言 + 大量可重用的優秀CSS模式
Compass的詳細介紹和說明可見：http://compass-style.org/
准備工作(安裝運行環境)
安裝Ruby
使用SASS和Compass需要用到Ruby，可以到http://rubyinstaller.org/下載Ruby的安裝包，下載後的文件是“rubyinstaller-1.9.3-p429.exe”。
（注意，不要下載最新版Ruby2.0.0-p195，不然後面開發中會由於版本問題出錯。Ruby 1.9.3-p429就可以。）
雙擊運行，步驟如下：
注意將安裝目錄上的3個選項都選上。
點擊完成。
至此，Ruby就安裝完成了。
在開始菜單Ruby程序組下，單擊“Start Command Prompt with Ruby”。
進入Ruby的命令行界面。輸入
ruby –v
回車後界面提示如下：
說明Ruby運行環境安裝成功。
安裝Compass和Sass
要使用Compass，首先要在Ruby中安裝框架。
在開始菜單Ruby程序組下，單擊“Start Command Prompt with Ruby”，顯示命令提示窗口。在命令行輸入以下命令開始安裝Compass：
gem install compass
（該命令可以自動遠程安裝Compass相關文檔到本地文件夾中，由於采用遠程安裝的方式，因此安裝時間較長，請耐心等待。）
當看到如下圖所示窗口中的信息時，表示Compass已經安裝成功。
從圖中可以看出，已經安裝了sass-3.2.9版和compass-0.12.2 版。
在命令行中執行：compass –v 和 sass –v可以分別查看當前系統中已安裝的版本信息。
到這裡，已經完成了Sass和Compass的安裝。
Compass項目（Sass編譯成Css）
1.項目初始化
接下來，要創建一個你的Compass項目，假定它的名字叫做myproject，那麼在命令行鍵入：
compass create myproject
當前目錄中就會生成一個myproject子目錄。
進入該目錄：
cd myproject
你會看到，裡面有一個config.rb文件，這是你的項目的配置文件。還有兩個子目錄sass和stylesheets，前者存放Sass源文件，後者存放編譯後的css文件。
接下來，就可以動手寫代碼了。
2.編譯
在寫代碼之前，我們還要知道如何編譯。因為我們寫出來的是後綴名為scss的文件，只有編譯成css文件，才能用在項目上。
Compass的編譯命令是
compass compile
該命令在項目根目錄下運行，會將sass子目錄中的scss文件，編譯成css文件，保存在stylesheets子目錄中。
默認狀態下，編譯出來的css文件帶有大量的注釋。但是，生產環境需要壓縮後的css文件，這時要使用--output-style參數。
compass compile --output-style compressed
Compass只編譯發生變動的文件，如果你要重新編譯未變動的文件，需要使用--force參數。
compass compile --force
除了使用命令行參數，還可以在配置文件config.rb中指定編譯模式。
output_style = :expanded
:expanded模式表示編譯後保留原格式，其他值還包括:nested、:compact和:compressed。
說明：
* nested：嵌套縮進的css代碼，它是默認值。
* expanded：沒有縮進的、擴展的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮後的css代碼。
進入生產階段後，就要改為:compressed模式。
output_style = :compressed
也可以通過指定environment的值（:production或者:development），智能判斷編譯模式。
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下，除了一次性編譯命令，compass還有自動編譯命令
compass watch
運行該命令後，只要scss文件發生變化，就會被自動編譯成css文件。
更多的compass命令行用法，請參考官方文檔。
Compass、Sass與eclipse集成
通過上面的配置，我們可以通過文本編譯器等編輯好Sass文件後，再通過相應的目錄結構通過Ruby將Sass編譯成css，再復制粘貼到eclipse中我們的工程內，進行開發。可以看出這個過程比較繁瑣。那麼，如何在eclipse中可以直接編輯Sass文件，並能自動編譯成css被工程應用?下面就是對Compass、Sass與eclipse的集成研究。
1 確認ant已經安裝
2 打開工程的“properties”，選擇“Builders”，然後點擊 “New…” 按鈕
3 選擇“Ant Builder”，點擊“OK”
4 輸入名稱“compass.compile”，在“Main”Tab頁中，點擊“Browse Workspace”來選擇已放入工程中的build.xml文件。
5 選擇“Targets”Tab頁，在Auto-Build中點擊“Set Targets”按鈕，選擇“compass.compile”來使用Compass（ “sass.compile”只是用Sass），點擊“OK”
6 選擇“Build Options”Tab頁，點擊“Select Resources”按鈕，選擇Sass文件目錄，點擊“Finish”，再點擊“OK”。
現在當編輯Sass文件後， css文件將會自動的被創建或更新。
Sencha CMD安裝
Sencha CMD是打包和部署ExtJs和Sencha Touch應用的命令行工具。為了開發ExtJs4.2的主題，你必須安裝Sencha CMD3.1或更高的版本。
7 安裝Java Run-time Environment or JRE，要求版本>=6.0。
8 為了編輯樣式，需要Compass、Sass，所以需要安裝Ruby。注意，不要下載最新版Ruby2.0.0-p195，不然後面開發中會由於版本問題出錯。Ruby 1.9.3-p429就可以。
9 下載Sencha Cmd安裝包進行安裝。
10 下載並解壓Ext JS SDK。
ExtJS自定義主題樣式開發
2.3.1 創建工作空間
（注意，目錄名稱等不要用中文，特殊符號最好也不要用，否則會出錯）
打開系統cmd命令行窗口，定位到SDK解壓的目錄。輸入
sencha -sdk d:/ExtJs4-App/ext-4.2.1.883 generate workspace my-workspace
創建了一個包含自定義主題包package名為my-workspace的工作空間。這個命令將Ext JS SDK和package關聯到您的工作區中,這樣，主題和應用程序可以找到他們所需的依賴項。這個命令生成的主題和應用程序必須執行在工作區目錄中，因此改變你的工作目錄到新的“my-workspace”目錄：
cd my-workspace
你應該在“my-workspace”文件夾下看到兩個文件夾：
l “ext”：包含Ext JS SDK
l “package”包含Ext JS語言環境和主題包
2.3.2 生成一個應用程序進行測試的主題
創建一個自定義主題之前，我們需要設置一個方法來測試主題。最好的測試方法是在一個應用程序中使用它。在“my-workspace”目錄下運行以下命令：
sencha -sdk ext generate app ThemeDemoApp theme-demo-app
這告訴Sencha Cmd在一個新的子目錄“theme-demo-app”中生成一個名為ThemeDemoApp的應用程序，並同時關聯" Ext "目錄下的Ext JS SDK。現在讓我們構建應用程序：
cd theme-demo-app
sencha app build
有兩種方法可以運行您的應用程序:
11 開發模式：通過浏覽器打開“theme-demo-app/index.html”。
這個是沒有進行資源（源文件）壓縮的，易於調試。
12 產品模式：通過浏覽器打開“build/ThemeDemoApp/production/index.html”。
這個是為了給應用提供更小的內存占用和更好的性能，進行了資源（源文件）壓縮。
2.3.3 生成主題包和文件結構
Sencha Cmd允許自動的生成主題包和文件結構。在“theme-demo-app”下運行以下命令：
sencha generate theme my-custom-theme
這是告訴Sencha Cmd在當前工作空間下創建一個名為“my-custom-theme”的主題包。
讓我們看一看它的內容：
l ”package.json”——這是包屬性文件。它告訴Sencha Cmd一些包的信息，如 name, version, and dependencies (其他包所需要的配置)。
l “sass/”——這個目錄包含所有關於主題的sass文件。sass文件分為三個主要部分:
1) “sass/var/”——包含sass變量；
2) “sass/src/”——包含sass規則和UI混合調用，它們可以使用“sass/var/”下的變量；
3) “sass/etc/”——包含額外的公用功能或混入在“sass/var/”和“sass/src/”中的文件，這些文件應該是結構化匹配的組件類路徑。例如， Ext.panel.Panel的樣式變量應放置在一個命名為“sass/var/panel/Panel.scss”的文件內。
l “resources/”——包含主題需要的圖像和其他靜態資源。
l “overrides/”——包含一些替換Ext JS組件類（對組件進行主題化的類）的JavaScript。
2.3.4 配置主題繼承
主題包通常是這樣具有一個非常重要的、附加功能的特殊的包，它們可以繼承自其他的主題包。新版本Ext Js 4.2中利用主題包的這一特性來創建它的主題層次結構：
每個主題包必須從Base主題擴展。創建自定義主題的下一步是找出從哪個主題進行擴展。在工作空間中可以看到以下主題包：
l "ext-theme-base"--這個包是其他主題的基本主題，它是唯一一個沒有父主題的主題包。它包含了設置CSS規則的最少值，這些值是讓Ext JS組件和布局正確工作所必需的的內容。"ext-theme-base"的樣式規則在派生的主題中是不可配置的，應該避免覆蓋由這個主題創建的任何樣式規則。
l "ext-theme-neutral"--從"ext-theme-base"擴展而來，包含了絕大多數的可配置的樣式規則。大多數的變量是用於配置在"ext-theme-neutral"中定義的Ext JS組件樣式。這些變量可以被自定義主題替換。
l "ext-theme-classic"--默認主題。從"ext-theme-neutral"擴展而來。
l "ext-theme-gray"--從"ext-theme-classic"擴展而來
l "ext-theme-access"--從"ext-theme-classic"擴展而來。
l "ext-theme-neptune"--從"ext-theme-neutral"擴展而來。
建議使用"ext-theme-neptune"或"ext-theme-classic"作為自定義主題擴展的開始節點。這是因為，這些主題包含創建一個具有吸引力並立即可用的主題的所有必要的代碼。"ext-theme-neutral"是一個非常抽象的主題，不應該直接用於擴展。基於"ext-theme-neutral"進行自定義主題的擴展，需要數以百計的變量覆蓋和過多的工作量，而且可能只有非常高級的主題開發者才能進行這項工作，反之，使用"ext-theme-neptune"或"ext-theme-classic"可以通過簡單地改變幾個變量在幾分鐘內啟動並運行。另外你可以覆蓋"ext-theme-gray"或"ext-theme-access"，如果它們可以為自定義主題提供一個更理想的起點。
例如，我們創建一個由"ext-theme-neptune"擴展的自定義主題。首先需要替換目錄"packages/my-custom-theme/package.json"：
"extend": "ext-theme-classic"
為
"extend": "ext-theme-neptune"
你現在需要更新您的應用程序。確保正確的主題JavaScript文件都包含在應用程序“bootstrap.js”中，這樣應用程序就可以在開發模式下運行。在"theme-demo-app"目錄下運行以下命令。
sencha app refresh
2.3.5 配置全局主題變量
現在已經建立了自己的主題包，可以開始修改主題外觀。首先修改能夠派生出ExtJs組件公有顏色的基礎顏色。在"my-custom-theme/sass/var/"下，創建一個名為Component.scss的文件，在文件中輸入：
$base-color: #317040 !default;
如果你想讓你的自定義主題是可擴展的，一定要在所有變量末尾配置!default。沒有!default你將不能覆蓋一個派生主題的變量，因為Sencha Cmd變量遵循“反向”規則——大多數派生樣式第一，基本樣式最後。更多的!default信息可參考：Variable Defaults。
完整的Ext JS全局SASS變量列表請參考：Global_CSS。
2.3.6 構建包
為了使所有自定義的樣式規則生成css文件，需要在"packages/my-custom-theme/"目錄下運行命令：
sencha package build
這將在package下構建一個目錄。在 "my-custom-theme/build/resources"下你會發現一個文件命名為 my-custom-theme-all.css。這個文件包含所有Ext JS組件的樣式規則。你可以直接在應用程序中運用這個文件，但這並不可取，因為“all”文件包含所有的樣式，但是Ext JS組件和大多數應用程序只使用Ext JS組件的一個子集。當你構建一個應用程序時，Sencha Cmd能夠過濾掉未使用的CSS樣式規則，但是首先我們需要配置測試程序使用自定義主題。
2.3.7 在一個應用程序使用一個主題
為剛剛創建的自定義主題配置測試應用程序。找到theme-demo-app/.sencha/app/sencha.cfg
app.theme=ext-theme-classic
修改為
app.theme=my-custom-theme
如果你已經運行了一個構建使用經典主題的應用程序，你應該清理構建目錄。從theme-demo-app運行:
sencha ant clean
接著構建應用：
sencha app build
在浏覽器中打開"theme-demo-app/index.html"，你將看到如下
2.3.8 配置組件的變量
每一個Ext JS組件都有一個全局變量的列表,可以用來配置其外觀。下面，我們來改變面板標題的字體類型。創建文件"packages/my-custom-theme/sass/var/panel/Panel.scss"，代碼如下：
$panel-header-font-family: Times New Roman !default;
在“theme-demo-app”下運行：
sencha app build
在浏覽器中打開"theme-demo-app/index.html"，你將看到如下
在API文檔的每一節 "CSS Variables"中，有組件SASS變量的詳細列表。
2.3.9 創建自定義組件UI
在ExtJs框架中，每一個組件都有一個配置界面（默認為“default”）。這個屬性可以被配置在單個組件實例中，區別於其他組件的相同類型，給他們提供一個不同的外觀。
創建文件"packages/my-custom-theme/sass/src/panel/Panel.scss"，代碼如下：
復制代碼 代碼如下:
@include extjs-panel-ui(
$ui-label: 'highlight-framed',
$ui-header-background-color: red,
$ui-border-color:red,
$ui-header-border-color:red,
$ui-body-border-color:red,
$ui-border-width:5px,
$ui-border-radius:5px
);
打開"theme-demo-app/app/view/Viewport.js"，修改代碼如下：
復制代碼 代碼如下:
Ext.define('ThemeDemoApp.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Border',
'ThemeDemoApp.view.Main'
],
layout: {
type: 'border'
},
items: [{
// default UI
region: 'west',
xtype: 'panel',
title: 'West',
split: true,
width: 150
}, {
// custom "highlight" UI
region: 'center',
xtype: 'panel',
layout: 'fit',
bodyPadding: 20,
items: [
{
xtype: 'panel',
ui: 'highlight',
frame: true,
bodyPadding: 10,
title: 'Highlight Panel'
}
]
}, {
// neptune "light" UI
region: 'east',
xtype: 'panel',
ui: 'light',
title: 'East',
split: true,
width: 150
}]
});
在 "theme-demo-app" 下運行程序：
sencha app build
在浏覽器中打開"theme-demo-app/index.html"，你將看到如下
雖然UI是一個方便的方法,可以混合多種外觀配置為一個組件,他們不應該被過度使用。因為每次調用UI mixin會生成額外的CSS規則,無償調用UI mixin會產生過大的CSS文件。
另外重要一點是要記住當調用UI mixin時，是通過其命名參數調用mixin，不是沒有參數值的有序列表。盡管SASS都支持這兩種形式，最好使用這種形式:
復制代碼 代碼如下:
@include extjs-component-ui(
$ui-foo: foo,
$ui-bar: bar
);
避免下面的形式：
@include extjs-component-ui(foo, bar);
因為mixin參數的復雜性和數量有可能變動，如新增或刪除一個參數，那麼後一種調用方式就會失效。
2.3.10修改圖像資源
所有必需的圖像資源默認是繼承父主題的,但在某些情況下,您可能需要覆蓋一個圖像。這可以通過把所需的圖像在"my-custom-theme/resources/images/"下覆蓋相同名稱的圖像。例如,讓我們修改彈出窗口組件的信息圖標。保存"packages/my-custom-theme/resources/images/shared/icon-info.png"
現在使用自定義圖標，修改測試應用程序顯示一個消息框。在應用程序窗口的highlight panel 添加items("theme-demo-app/app/view/Viewport.js"):
復制代碼 代碼如下:
requires: [
...
'Ext.window.MessageBox',
...
],
...
title: 'Highlight Panel',
items: [{
xtype: 'button',
text: 'Show Message',
handler: function() {
Ext.Msg.show({
title: 'Info',
msg: 'Message Box with custom icon',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
}
}]
構建應用程序，在浏覽器中查看：
原始樣式：
2.3.11為IE中的CSS3效果切割圖像
在許多情況下,當創建新的用戶界面時，可能包括背景漸變或圓角。不幸的是,不是所有浏覽器都支持CSS3屬性,所以我們必須使用圖像來彌補。Sencha Cmd能夠自動切割這些圖片給你。要做到這一點,我們需要告訴Sencha Cmd哪些組件需要切片。這些切片配置文件都包含在每個主題的 "sass/example/"目錄下。參考"packages/ext-theme-base/sass/example/"：
"shortcuts.js"--這個文件包含了組件類型的基本配置,可以切割。大多數自定義主題不需要包含"shortcuts.js"文件;除非你的主題包括自定義組件樣式。你的樣式繼承所有的基本樣式的快捷鍵定義,也可以添加額外的快捷定義，需要在 "shortcuts.js"文件中調用Ext.theme.addShortcuts()函數。
"manifest.js"--這個文件包含能夠生成切片圖像的組件UI列表。可以從父主題繼承所有的清單條目,也可以在"manifest.js"中通過調用Ext.theme.addManifest()函數添加自己的清單條目。
"theme.html"--這個文件是用來渲染在"manifest.js"中定義的文件。
為"highlight" panel創建圓角切片， 創建"packages/my-custom-theme/sass/example/manifest.js" ，代碼如下：
復制代碼 代碼如下:
Ext.theme.addManifest(
{
xtype: 'panel',
ui: 'highlight'
}
);
編輯"packages/my-custom-theme/sass/example/theme.html"添加以下腳本標簽：
復制代碼 代碼如下:
<!-- Required because Sencha Cmd doesn't currently add manifest.js from parent themes -->
<script src="../../../ext-theme-neptune/sass/example/manifest.js"></script>
<!-- Your theme's manifest.js file -->
<script src="manifest.js"></script>
為了能夠在構建應用程序時將UI切片，必須在"theme-demo-app/sass/example/theme.html"中添加兩個腳本標記：
復制代碼 代碼如下:
<script type="text/javascript" src="../../../packages/ext-theme-neptune/sass/example/manifest.js"></script>
<script type="text/javascript" src="../../../packages/my-custom-theme/sass/example/manifest.js"></script>
構建應用程序，在IE8及以下版本浏覽，可以看到 "highlight" panel 展示的是圓角，和在IE9及其他浏覽器的CSS3效果呈現一致。
（IE7中）
2.3.12覆蓋主題JS
有時一個主題可以通過配置JS改變組件外觀。通過覆蓋主題包中的JavaScript就可以實現。如，創建"packages/my-custom-theme/overrides/panel/Panel.js" ，代碼如下：
復制代碼 代碼如下:
Ext.define('MyCustomTheme.panel.Panel', {
override: 'Ext.panel.Panel',
titleAlign: 'center'
});
現在需要構建主題包來讓"packages/my-custom-theme/build/my-custom-theme.js"包含這個新的覆蓋文件。在"packages/my-custom-theme/" 下運行：
sencha package build
現在應該刷新應用程序,這樣在開發模式下運行應用程序會包括該主題的JS覆蓋文件。在 "theme-demo-app"下運行：
sencha app refresh
構建應用：
sencha app build
在浏覽器中打開"theme-demo-app/index.html"，你將看到如下