轉自：
http://www.cnblogs.com/gaojun/archive/2013/05/28/3103908.html
如何了解及閱讀EXTJS的API文檔
《一》 一切從API開始
很多學ExtJs的朋友在初學ExtJs的時候覺得ExtJs的很簡單效果很好，幾行代碼就把效果搞定了。但是用得多了，抱怨就開始了：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，端口在80運作。然後在伺服器敲入位址：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: '測試按鈕'
}]
});
你也可以寫成
new Ext.Panel({
renderTo: 'panelDiv',
items:[{
xtype: 'panel',
html: '内容1'
},{
xtype: 'panel',
html: '内容2'
}],
buttons:[{
xtype: 'button',
text: '測試按鈕'
}]
});
或者用new的方式
new Ext.Panel({
renderTo: 'panelDiv',
items:[
new Ext.Panel({
html: '内容1'
}),
new Ext.Panel({
html: '内容2'
})
],
buttons: [new Ext.Button({
text: '測試按鈕'
})]
});
顯然，第一種寫法比其它兩種都要來得簡單
接下來是Public Properties，該部分定義了對象的成員變量。可以直接通過點号來通路的，通常該部分都是隻讀的屬性。如下：
該部分沒什麼好說的，對照着看說明就是了。唯一一個注意的就是initialConfig屬性。說明上是這樣的
initialConfig : Object
This Component's initial configuration specification. Read-only.
該屬性可以直接通路你的初始化對象，這樣可以節約了一些var變量，如果是傳入config的對象，例如ToolBar之類。可以直接從initialConfig屬性裡得到。
再接下來是Public Methods，也就是公開的對象方法。該部分定義了對象的能夠被通路的方法。
該部分順便說說方法的參數。對于javascript，其使用是比較“随意”的，沒有對overload的支援，使得在編寫時傳入參數極其容易弄錯。是以就需要注意看參數類型，對于可以使用不同參數類型，之間是用/号間隔開的。例如上圖的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了，為啥？很簡單，javascript關鍵字呗。
再接下來一行是該事件的發生條件：Fires after the Panel has been visually activated
這就說明該對象變成可視并活動時，将觸發該事件。
看過API文檔後，現在是否清楚了Event的使用了呢？如果不清楚那就看代碼吧：
new Ext.Panel({
renderTo: 'panelDiv',
title: '标題',
items:[{
xtype: 'button',
text: '按鈕'
}],
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元素有很大的差別，千萬别弄混了。
《二》 從DOM看EXTJS
看标題可能有人會問，為啥好好的例子不看，得從DOM看起呢？答案是目标隻為了一個：自運作結果把EXTJS看得更清楚點
首先，要看得靠點工具，帶點放大鏡什麼吧？對。我們需要的工具就是Internet Explorer Developer Toolbar(簡稱IEDevToolBar)，它是一個IE檢視DOM的結構的工具，還具備Style Trace，Debug style的功能，可謂功能強勁。我們在IE下分析DOM結構，靠的就是它了。當然，如果你選擇FireFox，fireBug也是一個不錯的選擇，但是通常客戶要求的是優先支援IE，那麼還是在IE下調試的好。
那麼，簡單的講講IEDevToolBar的使用，看下圖：
最左邊的是頁面的DOM樹檢視區，中間是屬性和樣式編輯區，該區可以自增加和修改某個元素的屬性和樣式，這樣就可以快速的調試某個屬性了, Show Read-Only Properties可以檢視隻讀的屬性。右邊是目前的樣式檢視。Show Default Value 可以檢視預設的css樣式。在Current Style裡，也有一個很特别的功能，就是在某個樣式資訊上點右鍵，可以Trace Style，進而跟蹤到該樣式是由哪個css控制的，這樣就能很快的定位到某個樣式的調試需要修改哪個css。選擇某個元素，你既可以通過箭頭選擇工具（ID Developer Toolbar上第一排工具條第一個）來選擇，也可以通過直接在DOM樹裡選擇某個結點。在DOM樹裡選擇的結點在HTML頁面裡會先邊框閃爍一會，再顯示為一個藍色的框。通過滑鼠工具選擇的，則直接加上一個藍色的框。
簡單的介紹過了，接下來的。我們要用這個工具去解決一些存在的問題。
首先，編寫一小段代碼，實作一個簡單的panel顯示效果：
new Ext.Panel({
renderTo: 'panelDiv',
title: '标題',
width: 200,
height: 200,
frame: true,
items:[{
xtype: 'button',
text: '按鈕'
},{
html: '一些文本'
}],
buttons:[{
text: '底部按鈕'
}]
});
運作效果如下：
這是一個最常見不過的Ext Panel相關應用的實作。打開看到發現原DIV并沒有改變，隻是在其内部增加了一系列的DIV。這樣你就清楚了，renderTo并沒有改變原來的對象。而是在其内部生成了一系列的PANEL形成我們看到的元件效果。依次看各DIV的class命名，你會發現Ext的css命名是很合理的。都帶有目前對象的xtype名，例如目前這個panel就成了"x-panel"。
好了，DIV内部暫時不細說了。目前既然要解決問題，那麼我們先“制造”點麻煩（一般想成為高手都得沒事找點麻煩的，例如順着不走倒着走之類）。
一個很小的改動，把 frame: true 給去掉，看渲染，看看成啥樣了：
得，“一些文本”那部分被一個難看的框給框住了。接下來就要開始分析了。從<div id=panelDiv>開始一級級找下來，找到<DIV class=x-panel id=ext-comp-1003>這個，看選擇的形狀。和出問題的那個框差不多了。根據這個class使用的名稱為x-panel和源代碼看來。選擇的這個就是代碼:
{ html: '一些文本' }
生成的這部分了。 接下來便需要跟蹤這部分的樣式了，看看究竟是哪裡出了問題。從id=ext-comp-1003這個出發向下級就3個結點，找起來也比較快。
懂點css的就知道，如果不是内部覆寫顔色，那麼邊框效果就是border制造出來的了。通過IEDevToolBar的選擇檢視形狀(選擇結點檢視形狀這個很有用，能幫助我們快速的定位到處理的結點)，不是通過覆寫顔色做出的邊框效果。那麼肯定是border-color制造的問題了。跟蹤第一級，Current Style裡border-width均為0，跟蹤第二級，裡面根本沒去定義border-width，那麼繼續向下找。跟蹤第三級别，問題找到了。
看畫圈的部分，由于設定了border為1px，導緻了我們發現的難看的邊框的出現。這樣就想到了設定style，根據class的命名，我們推測是body的style的問題。那麼“想當然”，我們設定一下bodyStyle看看:
},{
bodyStyle: 'border:none',
html: '一些文本'
}],
OK了！是不是很有成就感。先Cheers一下~
....
....
然後很遺憾的告訴你，API裡其實已經詳細的說了：
bodyBorder : Boolean
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when border == true. If border == true and bodyBorder == false, the border will display as a 1px wide inset border, giving the entire body element an inset appearance.
那麼就是說，把子元素的border設定為false，問題就解決了。
發現API的重要性了吧？其實很多問題，文檔上面都已經詳細的說了，隻怪你沒仔細看：），不過不要懊惱，這不是忽悠你，隻是告訴你，有這樣一種解決問題的途徑而已。所謂條條大路通羅馬，有了從DOM的角度去分析Extjs，就多了一條解決問題的方案。能解決問題的方案都是可性方案，至于哪條最好，這就得靠你自己多“磨練”了。例如調整form layout的label寬度和合适的元素位置，有了IEDevToolBar的幫助，将會變得友善很多。
至此兩章，該教程也就完結了。從API使用ExtJs是編寫功能代碼去生成功能頁面，而本章則是由頁面結果去反向分析功能代碼。一正一反，對比學習。
鴨梨講extjs的API
如果你對EXT有興趣但不知道如何下手，如果你有了API但不知道如何看如何用，如果你夠認真的話，那麼就看下面的内容，我保證你看了就會用API了，但是你必須看完，另，如果你沒有API的話，我提供一個2.0的API給你，在附件裡下載下傳。
================================開始===================================
有人這樣提問：
我怎麼判斷目前節點是否選中呀
function onItemClick(checked){
var myItems =[];
var checkedNodes =tree.getChecked();
for(var i=0;i<checkedNodes.length;i++){
alert(checkedNodes[i].checked());
myItems.push(checkedNodes[i].id);
}
alert(myItems.join(','));
};
alert(checkedNodes[i].checked()); 這個不對呀
那麼我就知道他不會用API，在瞎蒙。
很多人，特别是初學者，都這樣在看了别人代碼後，隻是按自己想的去加點或修改點什麼，結果呢，調試的時間付出了沉痛的代價，結果還是不知其是以然，面對這種現象，我很感慨，大家急切的心理我很了解，隻是萬事開頭難，但是再難你也要把開頭給做好。
API是學習EXT的最好手冊，是以我這裡就貼出原談話（去掉了些許），大家看完了就知道之是以然了。
逆天 09:19:02
鴨梨姐姐呀 我怎麼判斷目前節點是否選中呀
function onItemClick(checked){
var myItems =[];
var checkedNodes =tree.getChecked();
for(var i=0;i<checkedNodes.length;i++){
alert(checkedNodes[i].checked());
myItems.push(checkedNodes[i].id);
}
alert(myItems.join(','));
};
逆天 09:19:10
alert(checkedNodes[i].checked()); 這個不對呀
丫梨^_^ 09:22:58
偶滴神那
丫梨^_^ 09:23:06
你會不會看api呀
逆天 09:23:21
嘿嘿 偶這裡沒有API呀 姐姐
丫梨^_^ 09:23:23
checked是node的屬性，而不是方法
丫梨^_^ 09:23:45
哎，extjs的api下載下傳個被
丫梨^_^ 09:24:03
最好的方法是運作你目前在用的版本的ext工程
逆天 09:24:27
恩 我試驗過了呀 我選中節點後我彈出 alert(checkedNodes[i].checked); 報為null呀 姐姐
丫梨^_^ 09:24:32
要不然下載下傳的api根你實際在用的版本不同
逆天 09:24:39
恩
丫梨^_^ 09:25:45
沒有API你現在這樣寫代碼是在瞎蒙
逆天 09:25:53
恩
丫梨^_^ 09:26:09
對了。關于樹方面的你下載下傳了我的源碼了沒
丫梨^_^ 09:26:17
你運作那個錯了？
逆天 09:26:29
逆天 09:26:51
我是用擴充的樹呀
丫梨^_^ 09:27:09
哎，這叫啥擴充啊
逆天 09:27:18
不知道呀
逆天 09:27:28
偶新手咩 鴨梨姐姐
逆天 09:27:41
檔案“ExtJs_2API.CHM”(2.1MB)發送失敗！由于對方QQ的“接收檔案安全級”限制，您的檔案傳送請求被拒絕。
丫梨^_^ 09:27:46
偶也是新手啊
丫梨^_^ 09:28:02
給你個API好好揣摩去
逆天 09:28:06
在發下鴨梨姐姐
逆天 09:28:07
恩
丫梨^_^ 09:28:11
瞎蒙
丫梨^_^ 09:28:12
哈哈
逆天 09:29:26
鴨梨姐姐有中文的API米
丫梨^_^ 09:29:35
沒的
逆天 09:29:37
檔案“ExtJs_2API.rar”(2.1MB)已經發送完畢。
丫梨^_^ 09:29:42
中文不中文的不都一樣嗎
丫梨^_^ 09:30:03
你看看那些屬性的名字和方法的名字不就能大概知道了
丫梨^_^ 09:31:08
api會看麼
丫梨^_^ 09:31:30
你必須要會看
逆天 09:31:40
不會看 鴨梨姐姐
逆天 09:31:54
丫梨^_^ 09:32:09
Config Options
Public Properties
Public Methods
Public Events
基本上都由以上4部分組成
丫梨^_^ 09:33:05
Config Options下的内容為你在執行個體化一個對象時進行配置的，也就是比如new Panel({a:"xxx",b:"yyy"})，這裡的a和b就是來自于Config Options
丫梨^_^ 09:33:22
Config Options
Public Properties
Public Methods
Public Events
基本上每個類都由以上4部分組成
丫梨^_^ 09:34:01
你API打開了沒
丫梨^_^ 09:34:08
我給你簡單的說一下
逆天 09:34:10
開了
丫梨^_^ 09:34:40
咱就拿tree下的TreeNode來說一下
丫梨^_^ 09:35:17
看Config Options下的checked
丫梨^_^ 09:35:31
checked : Boolean
True to render a checked checkbox for this node, false to render an unchecked checkbox (defaults to undefined with no...
True to render a checked checkbox for this node, false to render an unchecked checkbox (defaults to undefined with no checkbox rendered)
丫梨^_^ 09:36:02
TreeNode是樹節點的意思，是吧，那麼肯定也就是一個節點
逆天 09:36:27
對
丫梨^_^ 09:36:30
而checked很明顯我們就能猜出來是 是否選中 的意思
逆天 09:36:38
對
逆天 09:36:51
可是鴨梨姐姐我寫上去了不行呀
丫梨^_^ 09:36:52
checked : Boolean 那麼你就要考慮是否是真的你想的那樣
丫梨^_^ 09:36:58
你先别看你的代碼
丫梨^_^ 09:37:46
這個checked是在Confgi Options下的，是執行個體化的時候用的，注意這點，其他時候能否用你是不知道的
丫梨^_^ 09:38:31
而且這個配置選項的值必須隻接受boolean類型的，也就是true或false
丫梨^_^ 09:38:57
比如 var root = new Ext.tree.TreeNode({checked:true});
丫梨^_^ 09:39:16
那其他的配置選項你你應該也知道怎麼用了是吧
逆天 09:39:21
恩
丫梨^_^ 09:39:39
比如href : String 表示的配置選項href接受的類型是string的
丫梨^_^ 09:39:51
我再強調下
丫梨^_^ 09:40:37
這個所謂的配置選項，也就是Config Options下的内容，隻有你在執行個體化的時候用的，也就是你在new 類名({...})時用的
丫梨^_^ 09:40:59
然後你再看 Public Properties 部分
逆天 09:41:14
Public Properties應該是方法吧
丫梨^_^ 09:41:26
屬性，老大，not 方法
丫梨^_^ 09:41:58
你看這個childNodes ，public properties下的，看到了沒
逆天 09:42:10
恩
丫梨^_^ 09:42:17
childNodes : Array 這樣寫的是吧？
逆天 09:42:30
對
丫梨^_^ 09:43:05
表示的是你從一個執行個體化對象裡取得的屬性，比如你剛才 var tn = new Ext.tree.treeNode({....});這樣已經執行個體化了一個對象了是不？
丫梨^_^ 09:43:15
那麼現在你可以取執行個體化對象的資料了。
丫梨^_^ 09:43:41
怎麼取呢，可以取裡面的什麼東西呢，那麼這裡public properties裡的列出的就是你能取的
丫梨^_^ 09:44:03
那麼你要tn.childNodes就能獲得一個Array類型的資料
丫梨^_^ 09:45:03
是以public properties下列出的就是一個執行個體化對象能取的資訊，冒号後面的是你索取得的資訊的傳回類型
丫梨^_^ 09:45:21
Public Methods 再來看這個部分
丫梨^_^ 09:45:47
一般第一個都會是你執行個體化一個對象的構造方法
丫梨^_^ 09:46:03
TreeNode( Object/String attributes )
丫梨^_^ 09:46:34
表示的是這個構造方法可以接受兩種類型的參數，一個是object類型的，一個是string類型的
丫梨^_^ 09:46:42
兩者均可
丫梨^_^ 09:47:03
所謂的object類型的一般是這種模式{...}
丫梨^_^ 09:47:21
而所謂的string類型就是"..."
丫梨^_^ 09:47:43
我們再看appendChild( Node/Array node ) : Node 這個
丫梨^_^ 09:47:52
那你說說這個方法是什麼意思
逆天 09:48:13
添加一個子節點吧
丫梨^_^ 09:48:23
什麼樣的子節點？
逆天 09:48:27
Node類型
丫梨^_^ 09:48:31
是麼
丫梨^_^ 09:48:34
就這個？
逆天 09:48:51
丫梨^_^ 09:49:13
表示的是能接受的參數是Node類型或者Array類型的資料
丫梨^_^ 09:49:17
看來你還是沒了解
逆天 09:49:37
啊奧 偶在看看
丫梨^_^ 09:49:35
注意看括号裡面的
丫梨^_^ 09:49:55
括号裡面的才是調用這個方法時需要傳遞進去的參數類型
逆天 09:50:06
2選1
丫梨^_^ 09:50:17
而冒号後面的那個Node的意思是你調用這個方法後傳回的一個資料類型
丫梨^_^ 09:51:32
比如var n = tn.appendChild(new Ext.tree.TreeNode({....}));那麼是能夠得到這個n的值的，并且這個n的值肯定就是Node類型的
丫梨^_^ 09:52:14
接下來看Public Events部分
丫梨^_^ 09:53:00
這部分的内容表示的是你在使用TreeNode類的時候可能出現的事件
丫梨^_^ 09:53:24
比如你對一個樹節點進行添加子節點的操作，那麼append事件就會發生
逆天 09:53:49
參數怎麼傳
逆天 09:54:03
tr.on("append",)
丫梨^_^ 09:54:03
也就是在你var n = tn.appendChild(new Ext.tree.TreeNode({....}));運作這個代碼的時候會發生append事件
逆天 09:54:18
恩
丫梨^_^ 09:54:21
你先聽我說完
逆天 09:54:27
恩好
丫梨^_^ 09:54:31
這個on不on的沒有什麼的
丫梨^_^ 09:54:42
append : ( Tree tree, Node this, Node node, Number index )
丫梨^_^ 09:55:10
冒号後面的表示的是發生這個事件時會傳遞過來的資料
丫梨^_^ 09:55:17
你要記住和了解這點
丫梨^_^ 09:56:01
那麼事件是這樣發生的，但是你如何捕獲事件呢
丫梨^_^ 09:56:07
就是通過兩種方式
丫梨^_^ 09:56:21
一種是on，一種是listeners
丫梨^_^ 09:57:05
你可以在執行個體化一個類的時候為listeners配置選項指派
丫梨^_^ 09:57:48
比如var tn = new Ext.tree.TreeNode({listeners:{"append":function(a,b,c,d){....}}})
丫梨^_^ 09:58:39
還有一種是你對這個執行個體進行on或addListener方法的調用
丫梨^_^ 09:58:52
Public Methods下面的on或addListener
丫梨^_^ 09:58:59
這個不是無緣無故出來的
逆天 09:59:47
on( String eventName, Function handler, [Object scope], [Object options] ) : void
丫梨^_^ 10:00:09
對，是以你要知道這個事件捕獲接受哪些參數
丫梨^_^ 10:00:35
這裡的[Object scope], [Object options]相對複雜些
丫梨^_^ 10:00:40
另外我先告訴你一下
丫梨^_^ 10:00:51
js跟java是不一樣的
丫梨^_^ 10:01:12
java的方法你傳遞的參數個數必須根定義的一樣，但是js的并不需要
丫梨^_^ 10:01:44
是以你在進行on方法的調用是可以傳遞不等同個數的參數
丫梨^_^ 10:02:13
那麼這裡on( String eventName, Function handler, [Object scope], [Object options] ) : void
丫梨^_^ 10:02:21
你可以隻傳遞2個參數
丫梨^_^ 10:02:51
一般情況下，這個api告訴你的是，[]這樣括起來的表示你可以不傳遞的參數
丫梨^_^ 10:03:04
其他的最好傳遞進來
丫梨^_^ 10:03:42
是以你可以這樣調用了. tn.on("append",function(){...})
丫梨^_^ 10:04:35
或者
tn.on("append",hello);
function hello(a,b,c,d){...}
逆天 10:05:47
[Object scope], [Object options]這個要傳什麼
丫梨^_^ 10:05:55
這個是作用域
逆天 10:06:06
沒有用到過呀
丫梨^_^ 10:06:07
一般就是傳遞this什麼的
丫梨^_^ 10:06:23
有時候會用到，特别是當你遇到一些問題時
逆天 10:06:30
比如
丫梨^_^ 10:06:34
這個比如我就不說了
丫梨^_^ 10:06:46
你可以網上找一下作用域的問題
丫梨^_^ 10:07:48
這個on或addListener方法的調用跟public events下的事件是挂鈎的
丫梨^_^ 10:08:30
事件append : ( Tree tree, Node this, Node node, Number index ) 冒号後面表示的是事件發生時自動得到的資訊
丫梨^_^ 10:09:21
是以，當你在調用on方法時，on方法裡handler參數就很關鍵了
丫梨^_^ 10:10:08
Function handler 這裡定義的方法将被調用，别且會将
事件append : ( Tree tree, Node this, Node node, Number index ) 冒号後面表示的是事件發生時自動得到的資訊
的參數傳遞給它
丫梨^_^ 10:10:45
是以你在定義這個handler的時候就可以定義成接受( Tree tree, Node this, Node node, Number index ) 這4個類型的參數
丫梨^_^ 10:11:05
他們的關系你弄明白了沒？
逆天 10:14:02
問下tree.on("click",function(node,event)
逆天 10:14:12
我怎麼知道function(node,event)有2個參數
丫梨^_^ 10:14:24
哎，你就沒明白我說的意思了。
逆天 10:14:25
click : ( Node this, Ext.EventObject e )
丫梨^_^ 10:14:27
恩
丫梨^_^ 10:14:28
對
丫梨^_^ 10:14:33
看來慢慢了解了
逆天 10:14:46
多虧了姐姐幫忙
丫梨^_^ 10:15:20
tree.on("click",function(node,event) 這裡的function(node,event)可以單獨拿出來
丫梨^_^ 10:15:37
就是我之上舉例的hello
丫梨^_^ 10:15:41
這樣代碼就規範些了
逆天 10:15:46
checkchange : ( Node this, Boolean checked ) 那這個沒有event
逆天 10:16:12
tree.on("checkchange ",function(node,checked)
丫梨^_^ 10:16:25
event 就是事件，事件并不是作用在方法上，而是作用在對象上
丫梨^_^ 10:16:50
隻是你在調用某些方法的時候觸發了事件的發生
丫梨^_^ 10:17:39
比如你想右鍵一個樹節點後去調用某個方法
逆天 10:17:53
dblclick : ( Node this, Ext.EventObject e ) ？
丫梨^_^ 10:18:25
那麼，你就可以tn.on("contextmenu",function(node,e){...})
逆天 10:18:46
這回比剛才明白好多了姐姐
逆天 10:18:48
嘿嘿
丫梨^_^ 10:18:52
Public Events下面的東西隻是定義了一些事件
丫梨^_^ 10:19:13
而真正使用事件是你進行捕獲
丫梨^_^ 10:19:23
就是用on
丫梨^_^ 10:19:47
另外我告訴你,on是addListener的簡寫，兩個方法是一樣的
逆天 10:20:11
恩
丫梨^_^ 10:20:15
你覺得現在這個api你能看明白了麼？
逆天 10:20:54
差不多就是英文的暈點 我英文不好
丫梨^_^ 10:21:00
根英文沒有關系
丫梨^_^ 10:21:07
看API就是看結構
丫梨^_^ 10:21:31
我再告訴你一點知識
丫梨^_^ 10:22:23
你看API各個配置選項或屬性或方法或事件的右邊
逆天 10:22:43
恩看見了 有的是Node
丫梨^_^ 10:22:42
是不是有個叫Defined By
丫梨^_^ 10:23:18
列頭 - Defined By
丫梨^_^ 10:23:22
看到了沒？
逆天 10:23:29
恩
逆天 10:23:32
看到了
丫梨^_^ 10:23:41
每個部分的列頭都有是不？
逆天 10:23:48
是
丫梨^_^ 10:24:11
他表示的是這些資訊是由哪個類定義的
丫梨^_^ 10:24:28
因為你要知道ext中一個很重要的資訊就是繼承
丫梨^_^ 10:24:49
是以有些方法或配置選項或屬性都是來自于他的父類或超類
丫梨^_^ 10:25:13
那麼這個Defined By 就告訴了你是來自具體的哪個父類或超類
丫梨^_^ 10:25:23
這樣在你看源碼的時候就非常清晰
丫梨^_^ 10:26:23
然後Defined By 如果字型是黑色的表示這個配置選項或屬性或方法或事件是他本身這個類定義的
丫梨^_^ 10:27:12
是以你一般去看一個類的特性的時候，你隻需要去關注這個黑色文本的那些配置選項或屬性或方法或事件
丫梨^_^ 10:27:54
然後我們再看看最上面的部分
丫梨^_^ 10:28:00
Class Ext.tree.TreeNodePackage: Ext.tree
Defined In: TreeNode.js
Class: TreeNode
Subclasses: AsyncTreeNode
Extends: Node
丫梨^_^ 10:28:49
這裡有Subclasses和Extends
逆天 10:28:57
恩
丫梨^_^ 10:29:02
知道是啥意思麼
逆天 10:29:10
繼承
丫梨^_^ 10:29:20
前面那個呢
逆天 10:29:22
不知道
丫梨^_^ 10:30:05
Subclasses表示這個類有哪些子類，Extends表示這個類繼承自哪個類
丫梨^_^ 10:31:03
我之是以要跟你說這點，是因為要告訴你 事件應用的限制
丫梨^_^ 10:32:05
隻有那些繼承了Observable類的類，也就是這個類是Observable的子類或子孫類，那麼這個類才擁有事件處理機制，也就是才會有Public Events部分
丫梨^_^ 10:33:03
是以，你如果你自己擴充一個類，想擁有事件處理和響應機制，那麼你這個類就必須是這個Observable類的子類或子孫類
丫梨^_^ 10:33:46
你可以一直點Extends後面的進去，最後肯定會出來我說的這個Observable類