黑貓仔的胡言亂語

資料來源: 次世代 Ajax 解決方案 EXTjs 開發實戰
作者:徐會生、何啟偉、康愛媛

Chapter 2 Ext 框架基礎:

2.1 Ext的事件和類別
(1) Ext 事件類型: a.自訂事件 b.瀏覽器事件

2.1.1 自訂事件

(1) Ext之事件模型
 所有繼承自 Ext.util.observable 類別的控制項皆可以支援事件。
因此可對這些繼承自 Ext.util.observable 的物件定義事件，並為這些事件配置監聽器。
當某個事件被觸發，Ext會自動呼叫對應的監聽器，此即為Ext之事件模型。

例2-1: 如何設計 Person 類別並為其配置事件監聽器

Step1: 定義Person類別
Person = function(name){
     this.name = name;
     this.addEvents(“walk”,”eat”,”sleep”);
}

Ext.extend(Person, Ext.util.observable, {
      info: function(event) {
              return this.name + ‘is’ + event + ‘ing.’;
      }
});

說明: (a) 此例定義了一個Person物件，擁有一個屬性 name。
        (b) 使用 this.addEvent() 函式定義了 walk、eat與sleep三個自訂事件。
        (c) 使用 Ext.extend() 讓Person物件繼承Ext.util.observable所有屬性。
             並擴充一個新函數 info()，並設計info() 函式可傳回Person的資訊。

Step2: 建立Person實體物件(instance)，並為其事件配置監聽器(listener)
var person = new Person(‘Lingo’);
person.on(‘walk’ , function() {
    Ext.Msg.alert(‘event’ , person.name + “is walking…”);
});
person.on(‘eat’, function(breakfast , lunch, supper){
    Ext.Msg.alert(‘event’, person.name + “want to eat” + breakfast + “and ”+ lunch + “and ” + supper + “.”);
});
person.on(‘sleep’, function(time) {
    Ext.Msg.alert(‘event’,person.name + “從” + time.format(“H”) + “點開始睡覺。”);
})

說明: (a) on為 addListener() 的簡寫型式。
        (b) on函式第一個函數為事件名稱，第二個參數為事件發生時所執行的函數。

Step3: 觸發事件
Ext.get(‘walk’).on(‘click’ , function{

person.fireEvent(‘walk’);
});

Ext.get(‘eat’).on(‘click’, function(){
person.fireEvent(‘eat’, ‘早餐’, ‘午餐’, ‘晚餐’);
});

Ext.get(‘sleep’).on(‘click’,function(){
person.fireEvent(‘sleep’, new Date());
});

說明: (a) 呼叫fireEvent() 即觸發函式，傳入一個事件名稱，其對應之監聽函式即會執行。
        (b) 與 on() 相反，un()為removeListener() 函式的簡寫，用途為刪除某事件之對應函數。
        (c) 另有一purgeListeners() 函數，可將所有監聽器刪除。

2.1.2 瀏覽器事件
(1) 主要使用 Ext.EventManager、Ext.EventObject與 Ext.lib.Event對原生瀏覽器事件進行包裝。
(2) HTML瀏覽器事件屬於單一綁定，Ext框架則是對於同一個事件可以綁定至多個事件處理控制碼上。

例2-2:
HTML:
var e=document.getElementById(“test”);
e.onclick=function(){alert(“handle1”)};
e.onclick=function(){alert(“hangle2”)}
==> 按下 test後，只會顯示 handle2提示框。

Ext:
Ext.onReady( function(){
    var test = Ext.get(‘test’);
    test.on(‘click’, function() {
    alert(“handle1”);
    });

    test.on(‘click’, function(){
    alert(“handle2”);
    });
});

==> 按下 test 後，handle1 與 handle2 提示框皆會依序顯示。