From Learn About the Ext JavaScript Library
本教程適用于Ext 2.0的版本，而版本1.x仍可找到。
無論你是Ext庫的新手，抑或是想了解Ext的人，本篇文章的內容都適合你。本文將簡單地介紹Ext的幾個基本概念，和如何快速地做出一個動態的頁面并運行起來，假設讀者已具備了一些JavaScript經驗和簡單了解HTML的文檔對象模型（document object model ，DOM）。
下載Ext
如果你未曾下載過，那應從官方網站那里下載最新版本的Ext http://extjs.com/downloads 。
因應各種的下載需求，有幾種不同的可選項。通常地，最穩定的版本，是較多人的選擇。下載解包后，那個example文件夾便是一個探索Ext的好地方！
開始！
我們將講講怎么使用Ext，來完成一些JavaScript常見的任務。如果你想自己試試，就應該先下IntroToExt2.zip ，用來構建已下面的Ext代碼。
Zip包里有三個文件：ExtStart.html, ExtStart.js和ExtStart.css。解包這三個文件到Ext的安裝目錄中（例如，Ext是在“C:\code\Ext\v2.0”中，那應該在"v2.0"里面新建目錄“tutorial”。雙擊ExtStart.htm，接著你的瀏覽器打開啟動頁面，應該會有一條消息告訴你配置已完畢。如果出現了Javascript錯誤，請按照頁面上的指引操作。
現在在你常用的IDE中或文本編輯器中，打開ExtStart.js看看。
Ext.onReady(function() {
alert("Congratulations! You have Ext configured correctly!");
});
Ext.onReady可能是你接觸的第一個也可能是在每個頁面都要使用的方法。這個方法會在DOM加載全部完畢后，保證頁面內的所有元素能被Script引用（reference）之后調用。你可刪除alert()那行，加入一些實際用途的代碼試試。
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 包含一個ID為“myDiv”的 div，然后，在ExtStart.js中加入下列語句）： The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
再回頭看看Element對象，發現什么有趣的東東呢？
- Element包含了常見的DOM方法和屬性，提供一個快捷的、統一的、跨瀏覽器的接口（若使用Element.dom的話，就可以直接訪問底層DOM的節點。）；
- Element.get()方法提供內置緩存（Cache），多次訪問同一對象效率上有極大優勢；
- 內置常用的DOM節點的動作，并且是跨瀏覽器的定位的位置、大小、動畫、拖放等等（添加/移除 CSS 類, 添加/移除事件處理程序, 定位, 改變大小, 動畫, 拖放）。
這意味著你可用少量的代碼來做各種各樣的事情，這里僅僅是一個簡單的例子（完整的列表在Element API 文檔中）。
繼續在ExtStart.js中，在剛才我們獲取好myDiv的位置中加入：
myDiv.highlight(); //黃色高亮顯示然后漸退
myDiv.addClass('red'); // 添加自定義CSS類 (在ExtStart.css定義)
myDiv.center(); //在視圖中將元素居中
myDiv.setOpacity(.25); // 使元素半透明
獲取多個DOM的節點
通常情況下，想獲取多個DOM的節點，難以依靠ID的方式來獲取。有可能因為沒設置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。這種情況下，你就會不用ID來作為獲取元素的依據，可能會用屬性（attribute）或CSS Classname代替。基于以上的原因，Ext引入了一個異常強大的Dom Selector庫，叫做DomQuery。
DomQuery可作為單獨的庫使用，但常用于Ext，你可以在上下文環境中（Context）獲取多個元素，然后通過Element接口調用。令人欣喜的是，Element對象本身便有Element.select的方法來實現查詢，即內部調用DomQuery選取元素。這個簡單的例子中，ExtStart.htm包含若干段落（<p>標簽），沒有一個是有ID的，而你想輕松地通過一次操作馬上獲取每一段，全體執行它們的動作，可以這樣做：
// 每段高亮顯示
Ext.select('p').highlight();
Element.select在這個例子中的方便性顯露無疑。它返回一個復合元素，能通過元素接口（Element interface）訪問每個元素。這樣做的好處是可不用循環和不分別訪問每一個元素。
DomQuery的選取參數可以是一段較長的數組，其中包括W3C CSS3 Dom選取器、基本XPatch、HTML屬性和更多，請參閱DomQuery API文檔以了解這功能強大的庫個中細節。
響應事件
到這范例為止，我們所寫的代碼都是放在onReady中，即當頁面加載后總會立即執行，功能較單一——這樣的話，你便知道，如何響應某個動作或事件來執行你希望做的事情，做法是，先分配一個function，再定義一個event handler事件處理器來響應。我們由這個簡單的范例開始，打開ExtStart.js，編輯下列的代碼：
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("你單擊了按鈕");
});
});
代碼依然會加載好頁面后執行，不過重要的區別是，包含alert()的function是已定義好的，但它不會立即地被執行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取ID為'myDottom'元素的引用，監聽任何發生這個元素上被單擊的情況，并分配一個function,以準備任何單擊元素的情況。
一般來說，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁面中的某一段落被單擊后，便有彈出窗口：
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("你單擊了一段落;");
});
});
這兩個例子中，事件處理的function均是簡單幾句，沒有函數的名稱，這種類型函數稱為“匿名函數（anonymous function）”，即是沒有名的的函數。你也可以分配一個有名字的event handler,這對于代碼的重用或多個事件很有用。下一例等效于上一例：
Ext.onReady(function() {
var paragraphClicked = function() {
alert("你單擊了一段落;");
}
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);
});
注意得到的e.target是DOM節點，所以我們首先將其轉換成為EXT的Elemnet元素，然后執行欲完成的事件，這個例子中，我們看見段落是高亮顯示的。
使用Widgets
(Widget原意為“小器件”，現指頁面中UI控件)
除了我們已經討論過的核心JavaScript庫，當前的Ext亦包括了一系列的最前端的JavaScirptUI組件庫。文本以一些常用的widget為例子，作簡單的介紹。
MessageBox
比起略為沉悶的“HelloWolrd”消息窗口，我們做少許變化，前面我們寫的代碼是，單擊某個段落便會高亮顯示，現在是單擊段落，在消息窗口中顯示段落內容出來。
在上面的paragraphClicked的function中，將這行代碼：
Ext.get(e.target).highlight();
替換為：
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
這里有些新的概念需要討論一下。在第一行中我們創建了一個局部變量（Local Variable）來保存某個元素的引用，即被單擊的那個DOM節點（本例中，DOM節點指的是段落paragrah,事因我們已經定義該事件與<p>標簽發生關聯的了）。為什么要這樣做呢？嗯...觀察上面的代碼，我們需要引用同一元素來高亮顯示，在MessageBox中也是引用同一元素作為參數使用。
一般來說，多次重復使用同一值（Value）或對象，是一個不好的方式，所以，作為一個具備良好OO思維的開發者，應該是將其分配到一個局部變量中，反復使用這變量！
現在，為了我們接下來闡述新概念的演示，請觀察MessageBox的調用。乍一看，這像一連串的參數傳入到方法中，但仔細看，這是一個非常特別的語法。實際上，傳入到MessageBox.show的只有一個參數：一個Object literal（對象字面化）,包含一組屬性和屬性值。在Javascript中，對象字面化是動態的，你可在任何時候用{和}創建一個典型的對象(object)。其中的字符由一系列的name/value組成的屬性，屬性的格式是[property name]:[property value]。在整個Ext中，你將會經常遇到這種語法，因此你應該馬上消化并吸收這個知識點！
使用對象字面化Object Literal的原因是什么呢？主要的原因是“靈活性、可伸縮性（flexibility）”的考慮"，隨時可新增、刪除屬性，亦可不管順序地插入。而方法不需要改變。這也是多個參數的情況下，為最終開發者帶來不少的方便（本例中的MessageBox.show())。例如，我們說這兒的foo.action方法，有四個參數，而只有一個是你必須傳入的。本例中，你想像中的代碼可能會是這樣的foo.action(null, null, null, 'hello').,若果那方法用Object Literal來寫，卻是這樣， foo.action({ param4: 'hello' })，這更易用和易讀。
Grid
Grid是Ext中人們最想先睹為快的和最為流行Widgets之一。好，讓我們看看怎么輕松地創建一個Grid并運行。用下列代碼替換ExtStart.js中全部語句：
Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});
grid.getSelectionModel().selectFirstRow();
});
這看上去很復雜，但實際上加起來，只有四行代碼（不包含測試數據的代碼）。
- 第一行創建數組并作為數據源。實際案例中，你很可能從數據庫、或者WebService那里得到動態的數據。
- 接著，我們創建并加載data store， data store將會告訴Ext的底層庫接手處理和格式化這些數據。不同的數據類型須在類Reader中指明。
- 接著，我們創建一個Grid的組件，傳入各種的配置值，有：
- 新的data store, 配置好測試數據和reader
- 列模型column model定義了 列columns的配置
- 其他的選擇指定了Grid所需的功能
- 最后，通過SelectionModel告訴Grid高亮顯示第一行。
不是太困難吧？如果一切順利，完成之后你會看到像這樣的：
當然，你現在還未掌握這段代碼的某些細節，但先不要緊，這個例子的目的是告訴你，只要學習了少量的幾行代碼，創建一個富界面的多功能的UI組件是可能的。更多的grid細節讀者可作為一種練習去學習。這兒有許多學習Grid的資源，Ext Grid教程、Grid交互演示交和Grid API文檔。
還有更多的..
這只是其中一部分。還有一打的UI Widgets可以供調用，如 layouts, tabs, menus, toolbars, dialogs, tree view等等。請探索 范例演示。
使用Ajax
在弄好一些頁面后，你已經懂得在頁面和腳本之間的交互（interact）原理。接下來，你應該掌握的是，怎樣與遠程服務器（remote server）交換數據，常見的是從數據庫加載數據（load）或是保存數據（save）到數據庫中。通過JavaScript異步無刷新交換數據的這種方式，就是所謂的Ajax。Ext內建卓越的Ajax支持，例如，一個普遍的用戶操作就是，異步發送一些東西到服務器，然后，UI元素根據回應（Response）作出更新。這是一個包含text input的表單，一個div用于顯示消息（注意，你可以在ExtStart.html中加入下列代碼，但這必須要訪問服務器）：
<div id="msg"></div>
<div>
Name: <input type="text" id="name" />
<input type="button" id="okButton" value="OK" />
</div>
<div id="msg"></div>
接著，我們加入這些處理交換數據的JavaScript代碼到文件ExtStart.js中(用下面的代碼覆蓋)：
Ext.onReady(function(){
Ext.get('okButton').on('click', function(){
var msg = Ext.get('msg');
msg.load({
url: 'ajax-example.php', // <-- 按實際改動
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
});
注意： 這個例子需要web server才可運行。 瀏覽器的URL地址不應是以file://開頭，而是http://開頭，否則的話Ajax的數據交互將不會工作。Localhost就可以工作得很好，但必須是通過http的。
這種模式看起來已經比較熟悉了吧！先獲取按鈕元素，加入一個匿名函數監聽單擊。在事件處理器中（event handler），我們使用一個負責處理Ajax請求、接受響應（Response）和更新另一個元素的Ext內建類，稱作UpdateManagerUpdater。UpdateManager可以直接使用，或者和我們現在的做法一樣，通過Element的load方法來引用（本例中該元素是id為“msg“的div）。當使用Element.load方法，請求（request)會在加工處理后發送，等待服務器的響應（Response），來自動替換元素的innerHTML。簡單傳入服務器url地址，加上字符串參數，便可以處理這個請求（本例中，參數值來自“name”元素的value),而text值是請求發送時提示的文本，完畢后顯示那個msg的div（因為開始時默認隱藏）。當然，和大多數Ext組件一樣，Ext.Ajax 有許多的參數可選，不同的Ajax請求有不同的方案。而這里僅演示最簡單的那種。
最后一個關于Ajax隱晦的地方就是，服務器實際處理請求和返回（Resposne）是具體過程。這個過程會是一個服務端頁面，一個Servlet，一個Http調度過程，一個WebService,甚至是Perl或CGI腳本，即不指定一個服務器都可以處理的http請求。讓人無法預料的是，服務器返回什么是服務器的事情，無法給一個標準的例子來覆蓋闡述所有的可能性。。
下面的例子是一些常見的語言以方便開始測試(這段代碼輸出剛才我們傳入'name'的那個值到客戶端，即發送什么，返回什么，然后在我們剛才寫的'msg' div中加入該文本）。PHP的已經包含在下載文件中，文件名為'ajax-example.php'，可換成你自己服務端的代碼：
Plain PHP
<?php if(isset($_POST['name'])) {
echo 'From Server: '.$_POST['name'];
}
?>
CakePHP
<?php if(isset($this->data['name'])) {
$this->flash('From Server: '.$this->data['name']);
}
?>
Django
from django.http import HttpResponse
def ajax_request(request):
return HttpResponse('From Server: %s' % request.POST.get('name', 'nada'))
Perl
#!/usr/bin/perl
use strict;
use warnings;
use CGI;
my $Query = new CGI;
print $Query->header();
print "Hello from : ".$Query->param('name');
exit;
ASP.Net
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Form["name"] != null)
{
Response.Write("From Server: " + Request.Form["name"]);
Response.End();
}
}
ColdFusion
<cfif StructKeyExists(form, "name")>
<cfoutput>From Server: #form.name#</cfoutput>
</cfif>
JSP
From Server: ${param.name}
使用Ajax的真正挑戰，是需要進行適當的手工編碼，并相應格式化為服務端可接收的數據結構。有幾種格式供人們選擇（最常用為JSON/XML)。 Ext沒有跟任何服務器語言有獨家聯系，因此其它特定語言的庫亦可用于Ext處理Ajax服務。只要頁面接受到結果是EXT能處理的數據格式，Ext絕不會干涉服務器其他的事情！推薦參閱我們提供的各個平臺資源以了解服務端框架的更多資訊和輔助。
下一步是？
現在你已經一睹Ext其芳容，知道她大概能做些什么了。下面的資源有助您進一步深入了解：