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

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

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

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

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

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

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

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

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

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

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

2.3.8   配置組件的變量
每一個(gè)Ext JS組件都有一個(gè)全局變量的列表,可以用來配置其外觀。下面，我們來改變面板標(biāo)題的字體類型。創(chuàng)建文件"packages/my-custom-theme/sass/var/panel/Panel.scss"，代碼如下：
$panel-header-font-family: Times New Roman !default;
在“theme-demo-app”下運(yùn)行：
sencha app build
在瀏覽器中打開"theme-demo-app/index.html"，你將看到如下

在API文檔的每一節(jié) "CSS Variables"中，有組件SASS變量的詳細(xì)列表。
2.3.9   創(chuàng)建自定義組件UI
在ExtJs框架中，每一個(gè)組件都有一個(gè)配置界面（默認(rèn)為“default”）。這個(gè)屬性可以被配置在單個(gè)組件實(shí)例中，區(qū)別于其他組件的相同類型，給他們提供一個(gè)不同的外觀。
 創(chuàng)建文件"packages/my-custom-theme/sass/src/panel/Panel.scss"，代碼如下：

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

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

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

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

構(gòu)建應(yīng)用程序，在瀏覽器中查看：

原始樣式：

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

為了能夠在構(gòu)建應(yīng)用程序時(shí)將UI切片，必須在"theme-demo-app/sass/example/theme.html"中添加兩個(gè)腳本標(biāo)記：

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

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

最新評(píng)論