該系列文章不側重全方位的去介紹ExtJs的使用，僅僅是側重於解決ExtJs問題的思考方法。寫的人不用長篇大論，學的人則可以自立更生。l
學習的人僅僅要有一些CSS的javascript的基礎知識而且對於英文不至於很蹩腳（以輔助詞霸能看懂ExtJs的API為准），都可以參考本教程進行修行。
非常多學ExtJs的朋友在初學ExtJs的時候認為ExtJs的非常easy效果非常好，幾行代碼就把效果搞定了。可是用得多了，抱怨就開始了：ExtJs的布局怎么這么麻煩啊。那些參數哪里來的呀？我想弄個效果怎么就弄不出來啦，然后風風火火的在論壇發一大堆帖子。發現沒幾個人睬，就得出結論了：ExtJs不好用。可是可以非常順利的用ExtJs解決這個問題的人卻大有人在，所以，不要抱怨酸葡萄了，想提高，還是得安安心心坐下來看帖子：）
在學習前，首先得明確一個道理：所謂開發高手，解決這個問題自然比一般的常人要快。除了經驗以外，當中能力最大的一方面，就是查找資料比一般常人要迅速。好比一本武林秘籍，落到常人手里一般是沒多大用處的，得“高人”點撥，先學點“內功心法”。對於ExtJs來說，“武林秘籍“就是ExtJs的API文檔。所以，學習ExtJs，首先得學會如何去看API。因此，第一步，就是學習如何看ExtJs的API文檔
下載ExtJs 2.0.2(ExtJs的最后一個免費版本號)的開發包，解壓縮后，可以看到有下面幾個文件夾：
adapter Extjs和其他JS開發包之間兼容使用的適配器，jquery,prototype和yui，還一個是ExtJs自己的
air 和adobe air整合用的
build jsBuild出來的文件夾
docs 武林秘籍就這本了
examples 養眼的一些ExtJs官方樣例，可供依葫蘆畫些瓢
source JSBuild用的源，里面有個jsb項目文件，能夠build出自己的Ext-all.js
resources ExtJs執行須要的資源文件，包含圖標和CSS這些
假設你下載的ExtJs有這些非空文件夾，恭喜你，至少有80%可能證明你下載的這個ExtJs不是山寨版或閹割版。能夠進一步學習了 ExtJs API的查看須要HTTP環境，這里推薦LiteServe。綠色軟件個頭小，功能也足。當然你也能夠用apache或IIS，然后把WEB根文件夾指向ExtJs的解壓文件夾，比如：d:/ext-2.0.2，port在80執行。然后在server敲入地址：http://localhost/docs/，loading完成后你就能夠看到ExtJs API的界面例如以下 
左邊的樹點擊后，右邊的標簽頁能加入該類的標簽，並在頁內顯示該類的信息。以panel為比例如以下：
如圖你能夠看到ExtJs的包，原始定義文件(build的src里相應的那個文件) ，相關類，繼承的子類，父類以及一顆直觀的繼承樹。然后接下來的區域“panel is..”是該類的說明，該區域非常重要，通常類的該區域可能給了該類的使用演示樣例以及須要注意的地方。
接下來是配置，屬性，方法和事件4部分。從上面圖片能夠看到，具體信息頂部給了到這4部分的鏈接："Properties" "Methods" "Events" "Config Options"。
滾動鼠標便能夠依次瀏覽該4部分：
首先出場的是Config Options，這些參數是創建類時構造方法的參數。例如以下：
你能夠看到內容分3列：
第一列是一個小三角箭頭。能夠折疊和展開該參數說明。
第二列是參數說明，假設說明區域還有內容未顯示完，內容末尾會顯示成“...”。如上圖animCollapse 的部分，點第一列的箭頭能夠展開。activeItem參數那行就是展開后的效果。展開后顯示該參數的說明，注意Config Options里有非常多參數都是有default屬性的，也就是說。在new的時候的參數Objects不傳入該參數，該參數默認就是使用default的值，這樣能夠大大降低了使用時構造參數的數量。比如new一個panel，除了指定渲染的對象外，能夠僅配置html的屬性，比如：new Ext.Panel({renderTo:'panelDiv',html:'內容'});
有一點特別要注意，就是傳入config對象時，千萬不要多了或漏了逗號。IE的對象定義格式要求非常嚴格，對象最后一個成員不能以逗號結尾，否則JS加載時就出錯了。比如：new Ext.Panel({renderTo:'panelDiv',html:'內容',}); 在FireFox3下能夠通過，可是在IE6下會導致一個無法編譯的錯誤。
第三列是定義類，因為javascript也是OO的語法，因此子類也繼承了父類的屬性和方法。前面帶有一個向上箭頭的是繼承的屬性或方法，通常假設看某個類的特有功能（比如Panel類的折疊collapse相關的方法），就須要找Difined By為當前類的說明行，這樣就非常方便。
對於Config Options的使用，另一個比較方便的地方，就是當指定Config Options的xtype后，在ExtJs生成容器的子對象時，能夠不用去new一個對象，而僅僅須要傳入配置對象，在對象里指定xtype就可以。有些容器的items有默認xtype，比如Ext.Panel的items傳入配置對象默認的xtype就是'panel'，Ext.Panel的buttons傳入的配置對象默認的xtype就是button。比如，下面3種寫法是等效的：
new Ext.Panel({
renderTo: 'panelDiv',
items:[{
html: '內容1'
},{
html: '內容2'
}],
buttons:[{
text: '測試button'
}]
});
你也能夠寫成
new Ext.Panel({
renderTo: 'panelDiv',
items:[{
xtype: 'panel',
html: '內容1'
},{
xtype: 'panel',
html: '內容2'
}],
buttons:[{
xtype: 'button',
text: '測試button'
}]
});
或者用new的方式
new Ext.Panel({
renderTo: 'panelDiv',
items:[
new Ext.Panel({
html: '內容1'
}),
new Ext.Panel({
html: '內容2'
})
],
buttons: [new Ext.Button({
text: '測試button'
})]
});
顯然，第一種寫法比其他兩種都要來得簡單
接下來是Public Properties，該部分定義了對象的成員變量。能夠直接通過點號來訪問的，通常該部分都是僅僅讀的屬性。例如以下：
該部分沒什么好說的，對比着看說明就是了。唯一一個注意的就是initialConfig屬性。說明上是這種
initialConfig : Object
This Component's initial configuration specification. Read-only.
該屬性能夠直接訪問你的初始化對象，這樣能夠節約了一些var變量，假設是傳入config的對象，比如ToolBar之類。能夠直接從initialConfig屬性里得到。
再接下來是Public Methods，也就是公開的對象方法。該部分定義了對象的能夠被訪問的方法。
該部分順便說說方法的參數。對於javascript，其使用是比較“任意”的，沒有對overload的支持，使得在編寫時傳入參數極其easy弄錯。因此就須要注意看參數類型，對於能夠使用不同參數類型，之間是用/號間隔開的。比如上圖的add方法，展開后能夠看到各參數的具體用法，比如展開后里面有這樣來說明Object參數：
A Component config object may be passed in order to avoid the overhead of constructing a real Component object
那么就是說，能夠直接把一個config對象傳進去而不是一個Ext.Component對象。這樣你就能夠理解了，採用相似add({xtype:'button',text:'按鈕'})這種寫法也是能夠的了。
所以說，ExtJs的API是說明最全的ExtJs教程，比不論什么教程練習什么的都要強。當然，也有更深層次學習的部分，那就是得看ExtJs源代碼，看ExtJs源代碼能夠實現一些比API更強的功能，比如，把formLayout里的Ext.form.Radio進行橫排。這就得看源代碼。
再接下來的部分也非常重要，假設要添加ExtJs對象的行為，除了擴展對象以外。最常見的就是加入偵聽了。你經常會看到網上一些人編寫Listener，而不知道那些參數是如何使用的，這里就是你最值得學習的地方了。也就是接下來的：
Public Events
比如，第一行active:(Ext.Panel p)，那么就是說，在這個對象的listeners里，你能夠監聽active這種方法，這種方法有一個參數p，傳入的對象是Ext.Panel，通常，假設傳入的參數名稱為當前類或其父類時，就是指對象本身，比如第2個Event的命名就非常清楚:Ext.Container this。只是你就不要在使用時，也命名變量叫this了，為啥？非常easy，javascriptkeyword唄。
再接下來一行是該事件的發生條件：Fires after the Panel has been visually activated
這就說明該對象變成可視並活動時，將觸發該事件。
看過API文檔后，如今是否清楚了Event的使用了呢？假設不清楚那就看代碼吧：
new Ext.Panel({
renderTo: 'panelDiv',
title: '標題',
items:[{
xtype: 'button',
text: 'button'
}],
listeners:{
afterlayout: function(panel, layout){
alert(panel.getXType());
}
}
});
因為active是非直接調用的事件，因此改用afterlayout事件做演示樣例，你能夠嘗試在afterlayout后的方法里用panel訪問你new出來的這個對象的方法。你會發現ExtJs給的自由發揮的空間事實上是很強大！
ExtJs的事件監聽，除了直接在對象創建時指定listeners外，還能夠在對象創建后用on方法來實現動態的加入。API如是說：
on( String eventName, Function handler, [Object scope], [Object options] )
不想監聽了，還能夠用un移除掉：
un( String eventName, Function handler, [Object scope] )
另一點，也是很值得注意的。就是盡管ExtJs的Component對象盡管都帶有dom元素，也有dom元素支持的那些方法比如click，resize。可是ExtJs的事件是擴展的。也就是，可能加入了ExtJs自己支持的一些特殊方法，並且行為，也可能與直接dom調用有一些差別，比如resize方法：
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
第一個元素是一個ExtJs對象，明顯與html的dom元素有很大的差別，千萬別弄混了。