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元素有很大的區別，千萬別弄混了。