1.1. 一切從extjs發布包開始
非常幸運的是，我們可以免費去extjs.com下載ext發布包，裡邊源代碼，api文檔，例子一應俱全。不過要是想訪問svn獲得最新的代碼，就要花錢了。不過我們現階段只要這個免費的發布包就可以了，透過裡邊的範例，可以讓我們體驗一下ext的風范。
下載位址︰http://www.extjs.com/download。到寫文檔的此時此刻，咱們可以選擇ext-1.1.1或者是ext-2.0下載。明顯可以看出來ext-2.0的版本高，12月4日終於正式發布了，尚未經過詳細測試，所以不敢說什麼。下面我們把兩個版本都介紹一點兒。
1.2. 看看ext-1.1.1的文檔
docs目錄下是api文檔，基本上所有的函數，配置，事件都可以在裡邊找到，直接打開index.html就可以檢視，左側選單還包含了對 examples目錄下例子的引用，不過有些例子需要使用json與後台做數據交換，必須放到伺服器上才能看到效果。還有一些後台代碼是使用php編寫的，如果想看這些例子的效果，還需要配置php營運環境。
如果你用java，而且jdk在1.5以上，不如直接裝個resin-3方便，它可以跑php呢。
1.3. 看看ext-2.0的文檔
api文檔依然在docs目錄下，雖然可以看到左邊的選單，但是點擊之後，右側的api頁面都是靠ajax獲得的，所以不能直接在本地檢視了，你必須把整個解壓縮後的目錄放到伺服器上，透過瀏覽器訪問伺服器，才能看到。
問為什麼docs打不開，只能看到一直loading的兄弟，都是因為沒把這些東西放到伺服器上的原因。
2.0中的api文檔中沒有例子的鏈接了，你需要自己去examples目錄下找你需要的例子，然後打開看，當然還是有一些例子需要放在伺服器上才能看到效果。
1.4. 為什麼有的例子必須放在伺服器上才能看到效果？
因為有些例子裡，用到Ajax去後台讀取數據，如果沒在伺服器上，Ajax返回的狀態一直是失敗，也無法獲得任何數據，所有就看不到正確的效果。不過以前在extjs.com論壇上看到過有人寫了localXHR，可以讓ajax從本地檔案系統獲得數據，這樣也許就可以擺脫伺服器的束縛了。
1.5. 為什麼自己按照例子寫的代碼，顯示出來總找不到圖片
ext裡經常用一個空白圖片做占位符號，然後用css裡配置的背景圖片做顯示，這樣有利於更換主題。這個空白圖片的名字就是Ext.BLANK_IMAGE_URL，預設情況下它的值是BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif"。雖然圖片很小，也要去網上下載，一旦下載失敗就顯示找不到圖片了。
看到這裡可能有人奇怪了，為什麼examples下的例子沒有找不到圖片的問題呢？看來你沒有仔細看例子那些代碼呢，每個例子都引用了../examples.js。在examples.js裡設定了Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';。所以要解決自己寫的例子找不到圖片的問題，只需要照examples.js裡修改s.gif的本地路徑就可以了。很簡單吧？
1.6. 我們還需要什麼？
1.
介於本人對firefox的喜愛，以及firebug在調試js過程中的便利，隆重向您推薦firefox+firebug的開發組合。再說了ext開發者也都是傾向於firefox開發的，所以一般都是在firefox上跑的好好的，放到ie上就出問題。這也跟ie自身的問題有些關係，可是目前ie佔據 90%的瀏覽器市場，最後我們還是需要讓自己的項目在ie上跑起來，所以要求我們能寫出跨瀏覽器的js來。
firebug的好處在於，可以顯示動態生成的dom，你甚至可以在firebug裡直接對dom進行修改，而這些修改會直接回應到顯示上。太厲害了
firebug提供的console，可以直接執行js腳本，配置console.debug，console.info，console.error等日誌方法更便於跟蹤。
對於ajax發送接收的數據，firebug都可以顯示出來，並且可以檢視發送的參數，以及返回的狀態和訊息。
1.7. 入門之前，都看helloworld。
為了照顧連最基本應用都跑不起來的同志，我們給出兩個入門版helloworld範例，並結合講解，領你入門呢。
1.7.1. 直接使用下載的發布包
1.
先去http://www.extjs.com/download下載zip格式的發布包
2.
隨便解壓縮到什麼目錄下，不管目錄名是什麼，最後應該看到裡邊是這樣的目錄架構。
3.
現下我們利用它的目錄架構，寫一個helloworld例子。
進入上圖中的examples目錄，新建一個helloworld目錄，helloworld目錄下新建一個helloworld.html檔案，將下列內容複製進index.html檔案中。
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script>
Ext.onReady(function(){
Ext.MessageBox.alert('helloworld', 'Hello World.');
});
</script>
4.
雙擊helloworld.html打開頁面，效果如下︰
很高興的告訴您，咱們的helloworld範例已經正確的執行了，下一步你最好把examples目錄下的例子都看一看，再看看裡邊的代碼怎么寫的，好好感受一下ext的風范，再繼續下去。
1.7.2. 只把必要的東西放進項目中
想把ext放入自己的項目，需要自己整理一下，因為發布包裡的東西並非都是必要的，比如文檔，比如例子，比如源代碼。
必要的最小集合是這樣︰ext-all.js，adapter/ext/ext-base.js，build/locale/ext-lang-zh_CN.js和整個resources目錄。
1.
ext-all.js，adapter/ext/ext-base.js就包含了ext的所有功能，所有的js腳本都在這裡了。
2.
build/locale/ext-lang-zh_CN.js是中文翻譯。
3.
resources目錄下是css樣式表和圖片。
自己的項目裡只需要包含這些東西，就可以使用ext了。使用時，在頁面中匯入︰
<link rel="stylesheet" type="text/css" href="${放置ext的目錄}/resources/css/ext-all.css" />
<script type="text/javascript" src="${放置ext的目錄}/ext-base.js"></script>
<script type="text/javascript" src="${放置ext的目錄}/ext-all.js"></script>
<script type="text/javascript" src="${放置ext的目錄}/ext-lang-zh_CN.js"></script>
請注意js腳本的匯入順序，其他的就可以自由發揮了。
