ExtJs自學教程(1)：一切從API開始

題 記

  該系列文章不側重全方位的去介紹ExtJs的使用，只是側重於解決ExtJs問題的思考方法。寫的人不用長篇大論，學的人則能夠自立更生。l
  學習的人只要有一些CSS的javascript的基礎知識並且對於英文不至於非常蹩腳（以輔助詞霸能看懂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元素有很大的區別，千萬別弄混了

摘自 特種兵—AK47