原文出處 翻譯：Frank

無論你是Ext庫的新手，抑或是想了解Ext的人，本篇文章的內容都適合你。本文將簡單地介紹Ext的幾個基本概念，和如何快速地做出一個動態的頁面并運行起來，假設讀者已具備了一些JavaScript經驗和初級了解HTML Dom。否則的話，請從閱讀初學JavaScript資源開始。

下載Ext

如果你未曾下載過，那應從這里下載最新版本的Ext http://extjs.com/downloads。

針對你的下載需求，有幾個不同的彈性選項。通常地，最穩定的版本，是較多人的選擇。下載解包后，那個example文件夾便是一個探索Ext的好地方！

開始！

我們將使用Ext，來完成一些JavaScript任務。

第一步要做的是，下載本教程的示例文件。Zip文件包括三個文件：ExtStart.html, ExtStart.js和ExtStart.css。解包這三個文件到Ext的安裝目錄中（例如，Ext是在“C:\code\Ext\v1.0”中，那應該在"v1.0"里面新建目錄“tutorial”。雙擊ExtStart.htm，接著你的瀏覽器打開啟動頁面，應該會有一條消息告訴你配置已完畢。如果是一個Javascript錯誤，請按照頁面上的指引操作。

在你常用的IDE中或文本編輯器中，打開ExtStart.js看看：

Ext.onReady可能是你接觸的第一個方法。這個方法是指當前DOM加載完畢后，保證頁面內的所有元素能被Script引用（reference）。你可刪除alert()那行，加入一些實際用途的代碼試試：

Ext.onReady(function() {alert("Congratulations! You have Ext configured correctly!"); });

Element：Ext的核心

大多數的JavaScript操作都需要獲取頁面上的某個元素（reference）,好讓你來做有趣的事情。傳統的JavaScript方法，是通過ID獲取Dom節點的：

var myDiv = document.getElementById('myDiv');

這毫無問題，不過這樣單單返回一個對象（DOM節點），用起來并不是太強大和好用。為了要用那節點干點事情，你將會要寫不少自定義的代碼；另外，對于不同類型瀏覽器之間的差異，要你處理起來可真頭大了。

進入Ext.element對象。元素（element）的的確確是Ext的心臟地帶，--無論是訪問元素（elements）還是完成一些動作，都要涉及它。Element的API是整個Ext庫的基礎，如果你時間不多，只想了解Ext中的一個類的話，Element一定是首選！

由ID獲取一個Ext Element如下（首頁ExtStart.htm包含一個div，ID名字為“myDiv”，然后，在ExtStart.js中加入下列語句）：

Ext.onReady(function() {var myDiv = Ext.get('myDiv');});

再回頭看看Element對象，發現什么有趣的東東呢？

• Element包含了常見的DOM方法和屬性，提供一個快捷的、統一的、跨瀏覽器的接口（若使用Element.dom的話，就可以直接訪問底層DOM的節點。）；
• Element.get()方法內置緩存處理（Cache)，多次訪問同一對象效率上有極大優勢；
• 內置常用的DOM節點的動作，并且是跨瀏覽器的定位的位置、大小、動畫、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。

這意味著你可用最小的代碼來做各種各樣的事情，這里僅僅是一個簡單的例子（完整的列表在ElementAPI中）。

繼續在ExtStart.js中，在剛才我們獲取好myDiv的位置中加入：

myDiv.highlight(); //黃色高亮顯示然后漸退 myDiv.addClass('red'); // 添加自定義CSS類 (在ExtStart.css定義) myDiv.center(); //在視圖中將元素居中 myDiv.setOpacity(.25); // 使元素半透明

獲取多個DOM的節點

通常情況下，不能由ID獲取多個DOM的節點，有可能因為沒設置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。這種情況下，你會不用ID來作為獲取元素的依據，可能會用屬性（attribute）或CSS Classname代替?；谝陨系脑?#xff0c;Ext引入了一個功能異常強大的Dom Selector庫，叫做DomQuery。

DomQuery可作為單獨的庫使用，但常用于Ext，你可以在上下文環境中（Context）獲取多個元素，然后通過Element接口調用。幸運的是，Element對象本身便有Element.selcect的方法來實現查詢，即內部調用DomQuery選取元素。這個簡單的例子中，ExtStart.htm包含若干段落（

標簽），沒有一個是有ID的，而你想輕松地通過一次操作馬上獲取每一段，全體執行它們的動作，可以這樣做：

// 每段高亮顯示 Ext.select('p').highlight();

DomQuery的選取參數是一段較長的數組，其中包括W3C CSS3 Dom選取器、基本XPath、HTML屬性和更多，請參閱DomQuery API文檔以了解這功能強大的庫的細節。

響應事件

到這范例為止，我們所寫的代碼都是放在onReady中，即當頁面加載后總會立即執行，功能較單一——這樣的話，你便知道，如何響應某個動作或事件來執行你希望做的事情，做法是，先分配一個function，再定義一個event handler事件處理器來響應。我們由這個簡單的范例開始，打開ExtStart.htm，編輯下列的代碼：

Ext.onReady(function() {Ext.get('myButton').on('click', function(){alert("You clicked the button");}); });

加載好頁面，代碼依然會執行，不過區別是，包含alert()的function是已定義好的，但它不會立即地被執行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取ID為'myDottom'元素的引用，監聽任何發生元素被單擊的情況，并分配一個function,以準備任何單擊元素的情況。

正路來說，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁面中的某一段落被單擊后，便有彈出窗口：

Ext.onReady(function() {Ext.select('p').on('click', function() {alert("You clicked a paragraph");}); });

這兩個例子中，事件處理的function均是簡單幾句，沒有函數的名稱，這種類型函數稱為“匿名函數（anonymous function）”，即是沒有名的的函數。你也可以分配一個有名字的event handler,這對于代碼的重用或多個事件很有用。下一例等效于上一例：

Ext.onReady(function() {var paragraphClicked = function() {alert("You clicked a paragraph");}Ext.select('p').on('click', paragraphClicked); });

到目前為止，我們已經知道如何執行某個動作。但當事件觸發時，我們如何得知這個event handler執行時是作用在哪一個特定的元素上呢？要明確這一點非常簡單，Element.on方法傳入到even handler的function中（我們這里先討論第一個參數，不過你應該瀏覽API文檔以了解even handler更多的細節）。在我們之前的例子中，function是忽略這些參數的，到這里可有少許的改變，——我們在功能上提供了更深層次的控制。必須先說明的是，這實際上是Ext的事件對象（event object）,一個跨瀏覽器和擁有更多控制的事件。例如，可以用下列的語句，恢復這個事件的指定的DOM節點：

Ext.onReady(function() {var paragraphClicked = function(e) {Ext.get(e.target).highlight();}Ext.select('p').on('click', paragraphClicked); });

注意指定的是DOM節點，所以我們首先將其恢復成為適當的元素，然后執行欲完成的事件，這個例子中，我們看見段落是高亮顯示的。

http://www.ajaxjs.com/article.asp?id=20071683

總結

以上是生活随笔為你收集整理的2007-11-7学习EXT第一天:EXT简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。