無(wú)論你是Ext庫(kù)的新手，抑或是想了解Ext的人，本篇文章的內(nèi)容都適合你。本文將簡(jiǎn)單地介紹Ext的幾個(gè)基本概念，和如何快速地做出一個(gè)動(dòng)態(tài)的頁(yè)面并運(yùn)行起來(lái)，假設(shè)讀者已具備了一些JavaScript經(jīng)驗(yàn)和初級(jí)了解HTML Dom。否則的話，請(qǐng)從閱讀初學(xué)JavaScript資源開(kāi)始。
下載Ext
如果你未曾下載過(guò)，那應(yīng)從這里下載最新版本的Ext http://extjs.com/downloads。
針對(duì)你的下載需求，有幾個(gè)不同的彈性選項(xiàng)。通常地，最穩(wěn)定的版本，是較多人的選擇。下載解包后，那個(gè)example文件夾便是一個(gè)探索Ext的好地方！
開(kāi)始！
我們將使用Ext，來(lái)完成一些JavaScript任務(wù)。
第一步要做的是，下載本教程的示例文件。Zip文件包括三個(gè)文件：ExtStart.html, ExtStart.js和ExtStart.css。解包這三個(gè)文件到Ext的安裝目錄中（例如，Ext是在“C:\code\Ext\v1.0”中，那應(yīng)該在"v1.0"里面新建目錄“tutorial”。雙擊ExtStart.htm，接著你的瀏覽器打開(kāi)啟動(dòng)頁(yè)面，應(yīng)該會(huì)有一條消息告訴你配置已完畢。如果是一個(gè)Javascript錯(cuò)誤，請(qǐng)按照頁(yè)面上的指引操作。
在你常用的IDE中或文本編輯器中，打開(kāi)ExtStart.js看看：
Ext.onReady可能是你接觸的第一個(gè)方法。這個(gè)方法是指當(dāng)前DOM加載完畢后，保證頁(yè)面內(nèi)的所有元素能被Script引用（reference）。你可刪除alert()那行，加入一些實(shí)際用途的代碼試試：
Ext.onReady(function() {
alert("Congratulations! You have Ext configured correctly!");
});
Element：Ext的核心
大多數(shù)的JavaScript操作都需要獲取頁(yè)面上的某個(gè)元素（reference）,好讓你來(lái)做有趣的事情。傳統(tǒng)的JavaScript方法，是通過(guò)ID獲取Dom節(jié)點(diǎn)的：
var myDiv = document.getElementById('myDiv');
這毫無(wú)問(wèn)題，不過(guò)這樣單單返回一個(gè)對(duì)象（DOM節(jié)點(diǎn)），用起來(lái)并不是太強(qiáng)大和好用。為了要用那節(jié)點(diǎn)干點(diǎn)事情，你將會(huì)要寫不少自定義的代碼；另外，對(duì)于不同類型瀏覽器之間的差異，要你處理起來(lái)可真頭大了。
進(jìn)入Ext.element對(duì)象。元素（element）的的確確是Ext的心臟地帶，--無(wú)論是訪問(wèn)元素（elements）還是完成一些動(dòng)作，都要涉及它。Element的API是整個(gè)Ext庫(kù)的基礎(chǔ)，如果你時(shí)間不多，只想了解Ext中的一個(gè)類的話，Element一定是首選！
由ID獲取一個(gè)Ext Element如下（首頁(yè)ExtStart.htm包含一個(gè)div，ID名字為“myDiv”，然后，在ExtStart.js中加入下列語(yǔ)句）：
Ext.onReady(function() {var myDiv = Ext.get('myDiv');});
再回頭看看Element對(duì)象，發(fā)現(xiàn)什么有趣的東東呢？
- Element包含了常見(jiàn)的DOM方法和屬性，提供一個(gè)快捷的、統(tǒng)一的、跨瀏覽器的接口（若使用Element.dom的話，就可以直接訪問(wèn)底層DOM的節(jié)點(diǎn)。）；
- Element.get()方法內(nèi)置緩存處理（Cache)，多次訪問(wèn)同一對(duì)象效率上有極大優(yōu)勢(shì)；
- 內(nèi)置常用的DOM節(jié)點(diǎn)的動(dòng)作，并且是跨瀏覽器的定位的位置、大小、動(dòng)畫、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。
這意味著你可用最小的代碼來(lái)做各種各樣的事情，這里僅僅是一個(gè)簡(jiǎn)單的例子（完整的列表在ElementAPI中）。
繼續(xù)在ExtStart.js中，在剛才我們獲取好myDiv的位置中加入：
myDiv.highlight(); //黃色高亮顯示然后漸退
myDiv.addClass('red'); // 添加自定義CSS類 (在ExtStart.css定義)
myDiv.center(); //在視圖中將元素居中
myDiv.setOpacity(.25); // 使元素半透明
獲取多個(gè)DOM的節(jié)點(diǎn)
通常情況下，不能由ID獲取多個(gè)DOM的節(jié)點(diǎn)，有可能因?yàn)闆](méi)設(shè)置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。這種情況下，你會(huì)不用ID來(lái)作為獲取元素的依據(jù)，可能會(huì)用屬性（attribute）或CSS Classname代替。基于以上的原因，Ext引入了一個(gè)功能異常強(qiáng)大的Dom Selector庫(kù)，叫做DomQuery。
DomQuery可作為單獨(dú)的庫(kù)使用，但常用于Ext，你可以在上下文環(huán)境中（Context）獲取多個(gè)元素，然后通過(guò)Element接口調(diào)用。幸運(yùn)的是，Element對(duì)象本身便有Element.selcect的方法來(lái)實(shí)現(xiàn)查詢，即內(nèi)部調(diào)用DomQuery選取元素。這個(gè)簡(jiǎn)單的例子中，ExtStart.htm包含若干段落（
標(biāo)簽），沒(méi)有一個(gè)是有ID的，而你想輕松地通過(guò)一次操作馬上獲取每一段，全體執(zhí)行它們的動(dòng)作，可以這樣做：
// 每段高亮顯示
Ext.select('p').highlight();
DomQuery的選取參數(shù)是一段較長(zhǎng)的數(shù)組，其中包括W3C CSS3 Dom選取器、基本XPath、HTML屬性和更多，請(qǐng)參閱DomQuery API文檔以了解這功能強(qiáng)大的庫(kù)的細(xì)節(jié)。
響應(yīng)事件
到這范例為止，我們所寫的代碼都是放在onReady中，即當(dāng)頁(yè)面加載后總會(huì)立即執(zhí)行，功能較單一——這樣的話，你便知道，如何響應(yīng)某個(gè)動(dòng)作或事件來(lái)執(zhí)行你希望做的事情，做法是，先分配一個(gè)function，再定義一個(gè)event handler事件處理器來(lái)響應(yīng)。我們由這個(gè)簡(jiǎn)單的范例開(kāi)始，打開(kāi)ExtStart.htm，編輯下列的代碼：
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
加載好頁(yè)面，代碼依然會(huì)執(zhí)行，不過(guò)區(qū)別是，包含alert()的function是已定義好的，但它不會(huì)立即地被執(zhí)行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取ID為'myDottom'元素的引用，監(jiān)聽(tīng)任何發(fā)生元素被單擊的情況，并分配一個(gè)function,以準(zhǔn)備任何單擊元素的情況。
正路來(lái)說(shuō)，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁(yè)面中的某一段落被單擊后，便有彈出窗口：
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
這兩個(gè)例子中，事件處理的function均是簡(jiǎn)單幾句，沒(méi)有函數(shù)的名稱，這種類型函數(shù)稱為“匿名函數(shù)（anonymous function）”，即是沒(méi)有名的的函數(shù)。你也可以分配一個(gè)有名字的event handler,這對(duì)于代碼的重用或多個(gè)事件很有用。下一例等效于上一例：
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
到目前為止，我們已經(jīng)知道如何執(zhí)行某個(gè)動(dòng)作。但當(dāng)事件觸發(fā)時(shí)，我們?nèi)绾蔚弥@個(gè)event handler執(zhí)行時(shí)是作用在哪一個(gè)特定的元素上呢？要明確這一點(diǎn)非常簡(jiǎn)單，Element.on方法傳入到even handler的function中（我們這里先討論第一個(gè)參數(shù)，不過(guò)你應(yīng)該瀏覽API文檔以了解even handler更多的細(xì)節(jié)）。在我們之前的例子中，function是忽略這些參數(shù)的，到這里可有少許的改變，——我們?cè)诠δ苌咸峁┝烁顚哟蔚目刂啤１仨毾日f(shuō)明的是，這實(shí)際上是Ext的事件對(duì)象（event object）,一個(gè)跨瀏覽器和擁有更多控制的事件。例如，可以用下列的語(yǔ)句，恢復(fù)這個(gè)事件的指定的DOM節(jié)點(diǎn)：
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
注意指定的是DOM節(jié)點(diǎn)，所以我們首先將其恢復(fù)成為適當(dāng)?shù)脑兀缓髨?zhí)行欲完成的事件，這個(gè)例子中，我們看見(jiàn)段落是高亮顯示的。