Pages

搜尋此網誌

2013年12月25日 星期三

extjs: events

extjs: events

資料來源: 次世代 Ajax 解決方案 EXTjs 開發實戰

作者:徐會生、何啟偉、康愛媛

Extjs 事件

ExtJs對事件的管理非常強大,主要定義在Ext.EventManager對象(單例模式)中。先看註冊事件監聽方式,ExtJs提供了幾種方式來註冊元素監聽函數

  • 透過 Ext.EventManager.addListener/on 函數來為指定元素的某種事件註冊監聽函數。例如:Ext.EventManager.on('test1','click',clickMe,this);
  • 透過ExtJs元素的on函數來為自身註冊某種事件的監聽處理函數。例如: Ext.get('test1').on('click', clickMe,this,{preventDefault:true});

其中 options參數是事件配置項,各項說明如下:

  • scope :可指定執行上下文
  • delegate :事件代理
  • stopEvent :阻止冒泡和默認行為
  • preventDefault :阻止默認行為
  • stopPropagation :停止事件冒泡
  • normalized :僅傳原生事件對象
  • delay :延遲執行
  • single :僅執行一次
  • buffer :延遲執行,多次時最後一次覆蓋前一次
  • target :指定在父元素上執行

舉例來說,假如我要進行事件延遲處理,就可以使用 delay

Ext.onReady( function (){   
    Ext.get( "btnAlert" ).on( "click" ,a, this ,{delay:2000});   
});

要知道更詳細的解說可以查看 extjs api: Ext.EventManager-method-addListener

Extjs 之事件模型

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

下面是個簡單的例子

定義Person類別

  • 此例定義了一個Person物件,擁有一個屬性 name。
  • 使用 this.addEvent() 函式定義了 walk、eat與sleep三個自訂事件。
  • 使用 Ext.extend() 讓Person物件繼承Ext.util.observable所有屬性。
  • 並擴充一個新函數 info(),並設計info() 函式可傳回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.’;
  }
});

建立Person實體物件(instance),並為其事件配置監聽器(listener)

  • on 為 addListener() 的簡寫型式。
  • on 函式第一個函數為事件名稱,第二個參數為事件發生時所執行的函數。
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”) + “點開始睡覺。”); 
})

觸發事件

  • 呼叫fireEvent() 即觸發函式,傳入一個事件名稱,其對應之監聽函式即會執行。
  • 與 on() 相反,un() 為 removeListener() 函式的簡寫,用途為刪除某事件之對應函數。
  • 另有一 purgeListeners() 函數,可將所有監聽器刪除。
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());
});

瀏覽器事件

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

原生 HTML

var e=document.getElementById(“test”);
e.onclick=function(){alert(“handle1”)};
e.onclick=function(){alert(“hangle2”)};

按下 test後,只會顯示 handle2 提示框。

extjs

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

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

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

張貼留言