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

發佈留言