1.3 如何學習Ext JS

如何學習Ext JS呢？所有剛接觸Ext JS的讀者都會詢問該問題。學習Ext JS的最好辦法就是獨立去實現一個應用系統，該系統的相關功能可以根據Ext JS包中的自帶實例進行修改。在實現的過程中肯定會碰到這樣那樣的問題，這時可以通過論壇或其他方式來解決。

在學習或開發之前，我們得先知道在哪里下載Ext JS、如何搭建開發環境及與其相關的論壇。

1.3.1 獲取源碼并部署

我們可以從Ext JS官方網站下載其最新的版本，目前的版本號是Ext JS 3.0，其網址為：http://www.extjs.com/products/extjs/download.php。下載的壓縮包中包括源碼、實例和文檔等。為了能運行其文檔或實例，我們要將其解壓部署在如IIS、Tomcat容器中。

只要把下載的Ext JS 3.0解壓之后的根目錄文件夾直接復制到對應容器中，再重啟該容器，接下來就可以通過http://localhost:8080/ext-3.0/docs/index.html訪問到其文檔，或通過http://localhost:8080/ext-3.0/examples/samples.html訪問其實例，如圖1.1所示。

1.3.2 開發工具的智能提示

“工欲善其事，必先利其器”，在使用和開發Ext JS之前，我們也要找到一個好的開發工具。Ext JS有眾多的類和函數，有時很難記住每個類或函數的拼寫，如果開發工具能提供智能提示，將給開發者提供巨大方便。

Spket是開發Ext JS的利器，它支持Ext JS的智能提示。它分別為Eclipse 3.2、Visual Studio 2008和Dreamweaver CS3等開發工具提供相對應的Ext JS智能提示的插件。在Eclipse中還支持鏈接跳轉方式的代碼查看，這對于學習和分析Ext JS源碼有著極大的幫助。

圖1.1 Ext JS自帶實例演示

Visual Studio 2008本身就支持JS的智能提示，只要在需要提示的JS文件中引入依賴的類庫即可，如/// <reference path= “vswd-ext_2.2.js” />。但是直接引用Ext JS中的文件有時候會出現一些問題，于是Spket專門提供vswd-ext_2.2.js（目前尚未提供vswd-ext_3.0.js，該文件可以用來智能提示ext_3.0）來代替Ext JS源碼進行智能提示，如圖1.2所示，該文件可以從http://www.spket.com/ext-intellicense-visual-studio.html下載。

圖1.2 Visual Studio 2008智能提示

Dreamweaver開發工具的用戶可以使用SpketDW （Dreamweaver 2004）和SpketDWCS （Dreamweaver CS3）插件來進行智能提示。兩者都是Spket團隊開發的，因此同樣精確和出色。另外，Dreamweaver插件的一大特點是能很好地支持配置項的代碼提示。

我們可以到http://www.spket.com/dreamweaver-extension.html下載相對應的插件。對于Dreamweaver CS3，在安裝SpketDWCS插件之前，還需要先安裝Adobe Extension Manager CS3 1.8的插件，其提示如圖1.3所示。

圖1.3 Dreamweaver智能提示

Spket IDE是目前支持Ext JS的最為出色的IDE。它采用.jsb項目文件并將繼承于基類和所有文檔的內容嵌入到生成代碼提示的Script文檔中。下面介紹它的安裝步驟。

step 1 在Eclipse菜單中選擇“Help→Software Updates→Find and Install...→Search for new features to install→New remote site...”命令，這時會彈出窗口，在其中的“Name”文本框中輸入“Spket”，在“Url”文本框中輸入“http://www.spket.com/update/”。單擊“OK”按鈕，接下來按提示操作就可以完成安裝，最后重啟Eclipse。

step 2 在Eclipse菜單中選擇“Window→Preferences→Spket→JavaScript Profiles→New”命令，彈出窗口，輸入名字“Ext JS”，單擊“OK”按鈕。這時Ext JS會出現在主窗口中，選擇“Ext JS”并單擊“Add Library”按鈕，彈出一個小窗口，在該窗口中的下拉條中選擇“Ext JS”選項，為Ext JS指明其屬于哪一種類型。接下來在主窗口中選擇“Ext JS”并單擊“Add File”按鈕，然后在“./ext-3.0/source”目錄中選擇“ext.jsb”文件。

step 3 設置新的Ext JS Profile，選中它并單擊“JavaScript Profiles”對話框右邊的“Default”按鈕。

step 4 打開JS的方式為選擇“Window→Preferences→General→Editors→File...”命令，選擇“JS”為“Spket JavaScript Editor(default)”。現在就可以看到其智能提示的效果，如圖1.4所示。

圖1.4 Eclipse智能提示

1.3.3 文檔和實例的學習

學習和使用Ext JS，有兩樣東西是必不可少的：一是其文檔，二是其自帶實例。讀者如果想要實現什么功能，可以先到實例中去查看一下，一般都會找到自己要實現的效果。對于實例源碼，通常需要進行一些修改，然后將其應用到系統中去。在分析實例源碼時，我們就需要用到其文檔。

Ext JS文檔把所有公開類的使用方法、屬性及事件等都進行了詳細說明，使用時唯一困難的地方就是它是英文文檔。Ext JS文檔網頁分成兩部分，如圖1.5所示。

圖1.5 Ext JS文檔說明

其中左邊是所有類導航，可以進行篩選過濾查詢。只要單擊左邊導航樹上的節點，右邊就會出現相對應的類說明。如圖1.5所示的Ext.Panel類，右邊說明包括5個部分：第1部分是對該類進行概述性說明。接下來的4部分是對Ext JS類的4大功能一一進行說明。在使用某類時，我們一般都要通過new來構建該類，其中傳入的參數是配置對象，配置對象中包括眾多配置項，這些都一一列出并進行了說明，如圖1.6所示。

圖1.6 配置項

配置項可以繼承父類，如Ext.Panel類的activeItem配置項就繼承于Ext.Container類。同時，對每個配置項還指定了類型，其使用方法如下：

mypanel=new Ext.Panel({activeItem:1,allowDomMove:true });

接下來文檔對類的屬性和方法進行了說明，在使用時可以根據需求調用相關的方法，最后一部分是對事件進行說明，如圖1.7所示。

圖1.7 事件的說明

當類運行到某一個時刻需要自定義擴展處理時，就要使用事件來定制回調函數。對于初學者來說，文檔中的事件有點難于理解。我們通過一個例子來說明，圖1.7中有一個事件叫“add”，如果我們需要在向Panel增加組件之后彈出通知信息，可以用如下代碼實現：

mypanel.on("add",function(t,c,i){alert("add panel");});

當mypanel實例運行到“add”時，就會調用自定義的回調函數。回調函數的參數是系統自動傳入的。不同的事件會有不同的參數，該參數在文檔中進行了說明。

1.3.4 學習論壇

在學習和使用Ext JS的過程中，可能會碰到各種各樣的問題。有的時候，這些問題不能自行解決，需要求助于他人。Ext JS應用廣泛，在網絡上有很多討論相關技術的論壇。

Ext JS官方論壇可以說是最權威的Ext JS技術論壇，它是Ext JS用戶交流的窗口。該論壇不但提供眾多的Ext JS擴展組件，還提供了Ext JS新的功能需求、求助等眾多版塊，問題基本能在這里得到解決。其網址是http://www.extjs.com/forum/。

國內也有一些論壇，有大量的開發者在其中討論Ext JS，如“一起Ext”等網站。