本文基于Ext JS 4.2.1版本
UI組件基礎
學習ExtJS就是學習組件的使用。ExtJS4對框架進行了重構，其中最重要的就是形成了一個結構及層次分明的組件體系，由這些組件形成了Ext的控件。
ExtJs4的組件體系中有將近100種組件，而這些組件又可以大致分為四大類，即容器類組件、工具欄及菜單欄組件、表單及元素組件、其他組件。
theme主題
ExtJs4引入了全新的主題系統(tǒng)，采用Sass和Compass技術，提供了標準的主題模板，通過對主題模板的簡單定制就可以創(chuàng)造出豐富多彩的各種主題。

Sass和Compass概述
Sass
Sass樣式表語言是CSS的一個擴展，為CSS提供了變量、內(nèi)嵌規(guī)則、混入（mixins）、選擇器繼承等特性，在最新的Sass3中100%兼容CSS3，語法文件也升級為SCSS（Sassy CSS），每一個有效的CSS3文件也是有效的SCSS文件，這種兼容性降低了學習成本，開發(fā)人員可以平穩(wěn)的由CSS過渡到Sass的開發(fā)。
Sass樣式表語言為CSS級聯(lián)樣式表提供了編程的能力，現(xiàn)在我們可以在Sass中定義變量在不同的樣式中引用甚至進行計算，定義混入（mixins）在不同的地方進行復用，這些能力都是CSS所不具有的，經(jīng)過編譯之后Sass會輸出標準的CSS文件在不同的瀏覽器中使用。

Sass特性：
混入(Mixins)——class中的class；
參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；
嵌套規(guī)則——Class中嵌套class，從而減少重復的代碼；
運算——CSS中用上數(shù)學；
顏色功能——可以編輯顏色；
名字空間(namespace)——分組樣式，從而可以被調(diào)用；
作用域——局部修改樣式；
JavaScript 賦值——在CSS中使用JavaScript表達式賦值。
Sass的詳細介紹和說明可見：http://sass-lang.com/
Compass
Compass是一個基于Ruby的、開源的、用于CSS創(chuàng)作的框架。它使用Sass樣式表語言，可以非常容易和高效地構造樣式表，同時，Compass內(nèi)置了大量Web開發(fā)中可重用的優(yōu)秀模式，以便開發(fā)者使用。下面用一個簡單的等式來展示Compass所發(fā)揮的作用：
Compass = Sass樣式表語言 + 大量可重用的優(yōu)秀CSS模式
Compass的詳細介紹和說明可見：http://compass-style.org/
準備工作(安裝運行環(huán)境)
安裝Ruby
使用SASS和Compass需要用到Ruby，可以到http://rubyinstaller.org/下載Ruby的安裝包，下載后的文件是“rubyinstaller-1.9.3-p429.exe”。
（注意，不要下載最新版Ruby2.0.0-p195，不然后面開發(fā)中會由于版本問題出錯。Ruby 1.9.3-p429就可以。）
雙擊運行，步驟如下：
注意將安裝目錄上的3個選項都選上。
點擊完成。
至此，Ruby就安裝完成了。
在開始菜單Ruby程序組下，單擊“Start Command Prompt with Ruby”。

進入Ruby的命令行界面。輸入
ruby –v
回車后界面提示如下：

說明Ruby運行環(huán)境安裝成功。
安裝Compass和Sass
要使用Compass，首先要在Ruby中安裝框架。
在開始菜單Ruby程序組下，單擊“Start Command Prompt with Ruby”，顯示命令提示窗口。在命令行輸入以下命令開始安裝Compass：
gem install compass
（該命令可以自動遠程安裝Compass相關文檔到本地文件夾中，由于采用遠程安裝的方式，因此安裝時間較長，請耐心等待。）
當看到如下圖所示窗口中的信息時，表示Compass已經(jīng)安裝成功。

從圖中可以看出，已經(jīng)安裝了sass-3.2.9版和compass-0.12.2 版。
在命令行中執(zhí)行：compass –v 和 sass –v可以分別查看當前系統(tǒng)中已安裝的版本信息。
到這里，已經(jīng)完成了Sass和Compass的安裝。
Compass項目（Sass編譯成Css）
1.項目初始化
接下來，要創(chuàng)建一個你的Compass項目，假定它的名字叫做myproject，那么在命令行鍵入：　　
compass create myproject
當前目錄中就會生成一個myproject子目錄。
進入該目錄：
cd myproject
你會看到，里面有一個config.rb文件，這是你的項目的配置文件。還有兩個子目錄sass和stylesheets，前者存放Sass源文件，后者存放編譯后的css文件。

接下來，就可以動手寫代碼了。
2.編譯
在寫代碼之前，我們還要知道如何編譯。因為我們寫出來的是后綴名為scss的文件，只有編譯成css文件，才能用在項目上。
Compass的編譯命令是
compass compile
該命令在項目根目錄下運行，會將sass子目錄中的scss文件，編譯成css文件，保存在stylesheets子目錄中。
默認狀態(tài)下，編譯出來的css文件帶有大量的注釋。但是，生產(chǎn)環(huán)境需要壓縮后的css文件，這時要使用--output-style參數(shù)。
compass compile --output-style compressed
Compass只編譯發(fā)生變動的文件，如果你要重新編譯未變動的文件，需要使用--force參數(shù)。
compass compile --force
除了使用命令行參數(shù)，還可以在配置文件config.rb中指定編譯模式。
output_style = :expanded
:expanded模式表示編譯后保留原格式，其他值還包括:nested、:compact和:compressed。
說明：
* nested：嵌套縮進的css代碼，它是默認值。
* expanded：沒有縮進的、擴展的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮后的css代碼。
進入生產(chǎn)階段后，就要改為:compressed模式。
output_style = :compressed
也可以通過指定environment的值（:production或者:development），智能判斷編譯模式。
environment = :development

output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下，除了一次性編譯命令，compass還有自動編譯命令
compass watch
運行該命令后，只要scss文件發(fā)生變化，就會被自動編譯成css文件。
更多的compass命令行用法，請參考官方文檔。
Compass、Sass與eclipse集成
通過上面的配置，我們可以通過文本編譯器等編輯好Sass文件后，再通過相應的目錄結構通過Ruby將Sass編譯成css，再復制粘貼到eclipse中我們的工程內(nèi)，進行開發(fā)。可以看出這個過程比較繁瑣。那么，如何在eclipse中可以直接編輯Sass文件，并能自動編譯成css被工程應用?下面就是對Compass、Sass與eclipse的集成研究。
1 確認ant已經(jīng)安裝
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”。
現(xiàn)在當編輯Sass文件后， css文件將會自動的被創(chuàng)建或更新。
Sencha CMD安裝
Sencha CMD是打包和部署ExtJs和Sencha Touch應用的命令行工具。為了開發(fā)ExtJs4.2的主題，你必須安裝Sencha CMD3.1或更高的版本。
7 安裝Java Run-time Environment or JRE，要求版本>=6.0。
8 為了編輯樣式，需要Compass、Sass，所以需要安裝Ruby。注意，不要下載最新版Ruby2.0.0-p195，不然后面開發(fā)中會由于版本問題出錯。Ruby 1.9.3-p429就可以。
9 下載Sencha Cmd安裝包進行安裝。
10 下載并解壓Ext JS SDK。
ExtJS自定義主題樣式開發(fā)
2.3.1   創(chuàng)建工作空間
（注意，目錄名稱等不要用中文，特殊符號最好也不要用，否則會出錯）
打開系統(tǒng)cmd命令行窗口，定位到SDK解壓的目錄。輸入
sencha -sdk d:/ExtJs4-App/ext-4.2.1.883 generate workspace my-workspace
創(chuàng)建了一個包含自定義主題包package名為my-workspace的工作空間。這個命令將Ext JS SDK和package關聯(lián)到您的工作區(qū)中,這樣，主題和應用程序可以找到他們所需的依賴項。這個命令生成的主題和應用程序必須執(zhí)行在工作區(qū)目錄中，因此改變你的工作目錄到新的“my-workspace”目錄：
cd my-workspace
你應該在“my-workspace”文件夾下看到兩個文件夾：
l  “ext”：包含Ext JS SDK
l  “package”包含Ext JS語言環(huán)境和主題包

2.3.2   生成一個應用程序進行測試的主題
創(chuàng)建一個自定義主題之前，我們需要設置一個方法來測試主題。最好的測試方法是在一個應用程序中使用它。在“my-workspace”目錄下運行以下命令：
sencha -sdk ext generate app ThemeDemoApp theme-demo-app
這告訴Sencha Cmd在一個新的子目錄“theme-demo-app”中生成一個名為ThemeDemoApp的應用程序，并同時關聯(lián)" Ext "目錄下的Ext JS SDK?，F(xiàn)在讓我們構建應用程序：
cd theme-demo-app
sencha app build
有兩種方法可以運行您的應用程序: 　
11 開發(fā)模式：通過瀏覽器打開“theme-demo-app/index.html”。
這個是沒有進行資源（源文件）壓縮的，易于調(diào)試。
12 產(chǎn)品模式：通過瀏覽器打開“build/ThemeDemoApp/production/index.html”。
這個是為了給應用提供更小的內(nèi)存占用和更好的性能，進行了資源（源文件）壓縮。
2.3.3   生成主題包和文件結構
Sencha Cmd允許自動的生成主題包和文件結構。在“theme-demo-app”下運行以下命令：
sencha generate theme my-custom-theme
這是告訴Sencha Cmd在當前工作空間下創(chuàng)建一個名為“my-custom-theme”的主題包。
讓我們看一看它的內(nèi)容：
l  ”package.json”——這是包屬性文件。它告訴Sencha Cmd一些包的信息，如 name, version, and dependencies  (其他包所需要的配置)?！?BR>l  “sass/”——這個目錄包含所有關于主題的sass文件。sass文件分為三個主要部分:
1) “sass/var/”——包含sass變量；　
2) “sass/src/”——包含sass規(guī)則和UI混合調(diào)用，它們可以使用“sass/var/”下的變量； 　　
3) “sass/etc/”——包含額外的公用功能或混入在“sass/var/”和“sass/src/”中的文件，這些文件應該是結構化匹配的組件類路徑。例如， Ext.panel.Panel的樣式變量應放置在一個命名為“sass/var/panel/Panel.scss”的文件內(nèi)?！　?BR>l  “resources/”——包含主題需要的圖像和其他靜態(tài)資源?！　?BR>l  “overrides/”——包含一些替換Ext JS組件類（對組件進行主題化的類）的JavaScript。
2.3.4   配置主題繼承
主題包通常是這樣具有一個非常重要的、附加功能的特殊的包，它們可以繼承自其他的主題包。新版本Ext Js 4.2中利用主題包的這一特性來創(chuàng)建它的主題層次結構：

每個主題包必須從Base主題擴展。創(chuàng)建自定義主題的下一步是找出從哪個主題進行擴展。在工作空間中可以看到以下主題包：
l  "ext-theme-base"--這個包是其他主題的基本主題，它是唯一一個沒有父主題的主題包。它包含了設置CSS規(guī)則的最少值，這些值是讓Ext JS組件和布局正確工作所必需的的內(nèi)容。"ext-theme-base"的樣式規(guī)則在派生的主題中是不可配置的，應該避免覆蓋由這個主題創(chuàng)建的任何樣式規(guī)則。
l  "ext-theme-neutral"--從"ext-theme-base"擴展而來，包含了絕大多數(shù)的可配置的樣式規(guī)則。大多數(shù)的變量是用于配置在"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"作為自定義主題擴展的開始節(jié)點。這是因為，這些主題包含創(chuàng)建一個具有吸引力并立即可用的主題的所有必要的代碼。"ext-theme-neutral"是一個非常抽象的主題，不應該直接用于擴展。基于"ext-theme-neutral"進行自定義主題的擴展，需要數(shù)以百計的變量覆蓋和過多的工作量，而且可能只有非常高級的主題開發(fā)者才能進行這項工作，反之，使用"ext-theme-neptune"或"ext-theme-classic"可以通過簡單地改變幾個變量在幾分鐘內(nèi)啟動并運行。另外你可以覆蓋"ext-theme-gray"或"ext-theme-access"，如果它們可以為自定義主題提供一個更理想的起點。
例如，我們創(chuàng)建一個由"ext-theme-neptune"擴展的自定義主題。首先需要替換目錄"packages/my-custom-theme/package.json"：
"extend": "ext-theme-classic"
 為
"extend": "ext-theme-neptune"
你現(xiàn)在需要更新您的應用程序。確保正確的主題JavaScript文件都包含在應用程序“bootstrap.js”中，這樣應用程序就可以在開發(fā)模式下運行。在"theme-demo-app"目錄下運行以下命令。
sencha app refresh

2.3.5   配置全局主題變量
現(xiàn)在已經(jīng)建立了自己的主題包，可以開始修改主題外觀。首先修改能夠派生出ExtJs組件公有顏色的基礎顏色。在"my-custom-theme/sass/var/"下，創(chuàng)建一個名為Component.scss的文件，在文件中輸入：
$base-color: #317040 !default;
如果你想讓你的自定義主題是可擴展的，一定要在所有變量末尾配置!default。沒有!default你將不能覆蓋一個派生主題的變量，因為Sencha Cmd變量遵循“反向”規(guī)則——大多數(shù)派生樣式第一，基本樣式最后。更多的!default信息可參考：Variable Defaults。
完整的Ext JS全局SASS變量列表請參考：Global_CSS。
2.3.6   構建包
為了使所有自定義的樣式規(guī)則生成css文件，需要在"packages/my-custom-theme/"目錄下運行命令：
sencha package build
這將在package下構建一個目錄。在 "my-custom-theme/build/resources"下你會發(fā)現(xiàn)一個文件命名為 my-custom-theme-all.css。這個文件包含所有Ext JS組件的樣式規(guī)則。你可以直接在應用程序中運用這個文件，但這并不可取，因為“all”文件包含所有的樣式，但是Ext JS組件和大多數(shù)應用程序只使用Ext JS組件的一個子集。當你構建一個應用程序時，Sencha Cmd能夠過濾掉未使用的CSS樣式規(guī)則，但是首先我們需要配置測試程序使用自定義主題。
2.3.7   在一個應用程序使用一個主題
為剛剛創(chuàng)建的自定義主題配置測試應用程序。找到theme-demo-app/.sencha/app/sencha.cfg
app.theme=ext-theme-classic
修改為
app.theme=my-custom-theme
如果你已經(jīng)運行了一個構建使用經(jīng)典主題的應用程序，你應該清理構建目錄。從theme-demo-app運行:
sencha ant clean
接著構建應用：
sencha app build
在瀏覽器中打開"theme-demo-app/index.html"，你將看到如下

2.3.8   配置組件的變量
每一個Ext JS組件都有一個全局變量的列表,可以用來配置其外觀。下面，我們來改變面板標題的字體類型。創(chuàng)建文件"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文檔的每一節(jié) "CSS Variables"中，有組件SASS變量的詳細列表。
2.3.9   創(chuàng)建自定義組件UI
在ExtJs框架中，每一個組件都有一個配置界面（默認為“default”）。這個屬性可以被配置在單個組件實例中，區(qū)別于其他組件的相同類型，給他們提供一個不同的外觀。
 創(chuàng)建文件"packages/my-custom-theme/sass/src/panel/Panel.scss"，代碼如下：

打開"theme-demo-app/app/view/Viewport.js"，修改代碼如下：

在 "theme-demo-app" 下運行程序：
sencha app build
在瀏覽器中打開"theme-demo-app/index.html"，你將看到如下

雖然UI是一個方便的方法,可以混合多種外觀配置為一個組件,他們不應該被過度使用。因為每次調(diào)用UI mixin會生成額外的CSS規(guī)則,無償調(diào)用UI mixin會產(chǎn)生過大的CSS文件。
另外重要一點是要記住當調(diào)用UI mixin時，是通過其命名參數(shù)調(diào)用mixin，不是沒有參數(shù)值的有序列表。盡管SASS都支持這兩種形式，最好使用這種形式:

避免下面的形式：
@include extjs-component-ui(foo, bar);
因為mixin參數(shù)的復雜性和數(shù)量有可能變動，如新增或刪除一個參數(shù)，那么后一種調(diào)用方式就會失效。
2.3.10修改圖像資源
所有必需的圖像資源默認是繼承父主題的,但在某些情況下,您可能需要覆蓋一個圖像。這可以通過把所需的圖像在"my-custom-theme/resources/images/"下覆蓋相同名稱的圖像。例如,讓我們修改彈出窗口組件的信息圖標。保存"packages/my-custom-theme/resources/images/shared/icon-info.png"
現(xiàn)在使用自定義圖標，修改測試應用程序顯示一個消息框。在應用程序窗口的highlight panel 添加items("theme-demo-app/app/view/Viewport.js"):

構建應用程序，在瀏覽器中查看：

原始樣式：

2.3.11為IE中的CSS3效果切割圖像
在許多情況下,當創(chuàng)建新的用戶界面時，可能包括背景漸變或圓角。不幸的是,不是所有瀏覽器都支持CSS3屬性,所以我們必須使用圖像來彌補。Sencha Cmd能夠自動切割這些圖片給你。要做到這一點,我們需要告訴Sencha Cmd哪些組件需要切片。這些切片配置文件都包含在每個主題的 "sass/example/"目錄下。參考"packages/ext-theme-base/sass/example/"：
"shortcuts.js"--這個文件包含了組件類型的基本配置,可以切割。大多數(shù)自定義主題不需要包含"shortcuts.js"文件;除非你的主題包括自定義組件樣式。你的樣式繼承所有的基本樣式的快捷鍵定義,也可以添加額外的快捷定義，需要在 "shortcuts.js"文件中調(diào)用Ext.theme.addShortcuts()函數(shù)?！　?BR>"manifest.js"--這個文件包含能夠生成切片圖像的組件UI列表?？梢詮母钢黝}繼承所有的清單條目,也可以在"manifest.js"中通過調(diào)用Ext.theme.addManifest()函數(shù)添加自己的清單條目?！　?BR>"theme.html"--這個文件是用來渲染在"manifest.js"中定義的文件。
 為"highlight" panel創(chuàng)建圓角切片， 創(chuàng)建"packages/my-custom-theme/sass/example/manifest.js" ，代碼如下：
 
編輯"packages/my-custom-theme/sass/example/theme.html"添加以下腳本標簽：

為了能夠在構建應用程序時將UI切片，必須在"theme-demo-app/sass/example/theme.html"中添加兩個腳本標記：

構建應用程序，在IE8及以下版本瀏覽，可以看到 "highlight" panel 展示的是圓角，和在IE9及其他瀏覽器的CSS3效果呈現(xiàn)一致。
（IE7中）
2.3.12覆蓋主題JS
有時一個主題可以通過配置JS改變組件外觀。通過覆蓋主題包中的JavaScript就可以實現(xiàn)。如，創(chuàng)建"packages/my-custom-theme/overrides/panel/Panel.js" ，代碼如下：

現(xiàn)在需要構建主題包來讓"packages/my-custom-theme/build/my-custom-theme.js"包含這個新的覆蓋文件。在"packages/my-custom-theme/" 下運行：
sencha package build
現(xiàn)在應該刷新應用程序,這樣在開發(fā)模式下運行應用程序會包括該主題的JS覆蓋文件。在 "theme-demo-app"下運行：
sencha app refresh
構建應用：
sencha app build
在瀏覽器中打開"theme-demo-app/index.html"，你將看到如下

最新評論