[技術/ExtJs] ExtJs 框架基礎 [1]:

2010-10-27

2728
0

摘要:[Ext/Js] Ext 框架基礎 [1]:

把舊文搬過來.

資料來源: 次世代 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)

Ext:

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

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

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”) + “點開始睡覺。”); 
})

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

黑貓仔的修練之路

回首頁