在項目中使用ExtJS已經(jīng)有一段時間了， 對于這個龐大的Script類庫有了一定的了解， 在Ext的使用上也有了一定的經(jīng)驗， 現(xiàn)將這些經(jīng)驗做一下總結(jié)， 作為一個入門材料給大家分享。 對于Ext庫， 不要被它的龐大所嚇倒， 只要靜下心來看SDK， 多做一些練習(xí)， 還是很容易上手的。

ExtJS 中的類與繼承

  在Ext下， 定義一個JavaScript類似乎沒有什么特別的， 可以直接聲明一個構(gòu)造函數(shù)， 并使用關(guān)鍵字new來進行初始化。 有一點值得注意的是在Ext中頻繁出現(xiàn)的Singleton類， 普遍定義為：


Foo=function  (){
   return {
      init:function(){},
      destory:function(){}   
    }
}()

 



然后就可以直接調(diào)用Foo的方法了， 其實這段代碼可以理解為

Foo=(function  (){
   return {
      init:function(){},
      destory:function(){}   
    }
})()



這樣，就容易理解了。
談到類和繼承， 有幾個函數(shù)必須注意， Ext.apply、 Ext.applyIf和Ext.extend：
Ext.apply(obj, config, [defaults]) 將config對象的所有屬性都復(fù)制到另一個對象obj上， 第三個參數(shù)defaults可以用來提供默認值， 不過通常指用前兩個參數(shù)就夠了。 這個函數(shù)主要用在構(gòu)造函數(shù)中， 用來將配置復(fù)制到對象上。
Ext.applyIf(obj, config) 和Ext.apply的功能類似， 唯一不同的是， 這個函數(shù)只會將config對象中有， 而obj對象中沒有的屬性復(fù)制到obj上。

Ext.extend(subclass, superclass, [overrides]) 用來繼承已有的類， 通常的使用方法是
var SubClass = function() {
   SubClass.superclass.constructor.call(this);
};
Ext.extend(SubClass, BaseClass, {
   newMethod : function() {},
   overriddenMethod : function() {}
};

在上面的代碼中， SubClass繼承自BaseClass，  添加了新的方法newMethod， 重寫了overriddenMethod方法。
 
個人認為， 要扎實的掌握ExtJS， 并且能夠?qū)υ蓄悗爝M行擴展， 掌握以上的方法是必須的， 也是入門的必經(jīng)之路。



事件
事件是指一個特定的動作，這個動作可以針對HTML元素的，如keydown,keyup,mouseover, mouseout等，也可以是對于其它自定義的動作，如對Ajax異步請求的響應(yīng)等。在ExtJS中，該如何處理呢？

1. 處理HTML元素的標準事件

HTML元素的標準事件是指mouseover、mousedown、click、blur、focus、change等能夠直接對HTML元素發(fā)生的事件。在ExtJS中，這些事件的處理可以用如下的代碼：

注冊一個事件處理函數(shù)使用： Ext.get('myElement').on('click', myHandler, myScope) myElement是要注冊的元素的ID，click是事件的名稱（注意，和HTML元素中的聲明onXXX不同，這里不需要on），myHandler是處理函數(shù)的函數(shù)名稱，myScope是一個可選的參數(shù)，指定處理函數(shù)綁定的對象，也就是處理函數(shù)的作用域，如果不提供這個參數(shù)，則是默認的window。
撤銷一個事件處理函數(shù)： Ext.get('myElement').un('click', myHandler, myScope) 參數(shù)的意義同上。
ExtJS會根據(jù)不同的瀏覽器進行相應(yīng)的處理，根本不需要理會用戶用的是什么瀏覽器。根據(jù)事件的不同，傳給處理函數(shù)的參數(shù)也會不同，這個只能參考ExtJS的文檔了，必要時還得參考源代碼。

2. 處理自定義事件

在ExtJS中使用自定義事件，需要從Ext.util.Observable繼承，示例代碼如下：

Employee = function(name){
   this.name = name;
   this.addEvents({
      "fired" : true,
      "quit" : true
   });
}
Ext.extend(Employee, Ext.util.Observable, {  });

在這段代碼中，定義了一個Employee類，定義了fired和quit兩個事件。如何觸發(fā)這兩個事件呢，基類Ext.util.Observable提供了觸發(fā)自定義事件的方法fireEvent(eventName, arg1, arg2, ... argn), eventName是要觸發(fā)的時間的名稱（不區(qū)分大小寫），后面的參數(shù)arg1，arg2等是要傳給事件處理函數(shù)的參數(shù)。用上面的Employee類做示例，觸發(fā)quit事件：

this.fireEvent('quit', this);
這行代碼將觸發(fā)quit事件，并將Empolyee類的實例傳給quit事件的處理函數(shù)，quit事件的訂閱可以采用如下代碼：

function myHandler1(empolyee){  }
function myHandler2(empolyee){  }

var emp = new Empolyee('tom');
emp.on('quit', myHandler1);
emp.on('quit', myHandler2);


在上面的代碼中，為quit事件注冊了兩個處理函數(shù)（myHandler1與myHandler），當quit事件被激發(fā)時，將會依次調(diào)用myHandler1和myHandler2兩個函數(shù)。

值得注意的是，不管是HTML元素的標準事件還是自定義事件，如果為某個時間注冊了多個處理函數(shù)，如前面的例子，如果myHandler1返回false的話，則會取消在myHandler1之后注冊的處理函數(shù)的執(zhí)行，即該事件被取消，從而停止繼續(xù)執(zhí)行該事件的處理函數(shù)，而這個返回值false會作為事件激發(fā)的結(jié)果，返回給empolyee，即：



var result = this.fireEvent('quit', this);
if (result === false) {
   alert('event canceled'); //這里表示事件被某個處理函數(shù)取消
}
else {
   alert('event complete'); // 這里表示事件執(zhí)行完畢
}


通過Ext的自定義事件的機制，可以實現(xiàn)一對多的觀察者模式，也可以實現(xiàn)一對一的綁定模式，這一點，在ExtJS的開發(fā)中是很重要的。