ExtJS 3.2學習筆記（3） 自定義事件

  

   在Extjs中，全部繼承自Ext.util.Observable類的控件均可以支持事件。

   要爲一個類自定義一些事件，遵循如下步驟便可：

  1，首先定義一個類

  2，讓這個類繼承Ext.util.Observable類

  3，爲這個類定義一些事件，而且配置監聽器

  4，觸發類所定義的事件。

  看代碼：

   第一步：定義類而且繼承Ext.util.Observable類

定義一個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.';
     }
    })

  第二部：爲類添加監聽器;

      

var person=new Person("Mike");

  person.on('walk',function(){

    Ext.Msg.alert('event',person.name+'walk事件！！');

   });

  person.on('eat',function(breakfast，lunch,super){

    Ext.Msg.alert('event',person.name+'eat事         件！！'+breakfast+lunch+super);

   });

  person.on('sleep',function(time){

    Ext.Msg.alert('event',person.name+'sleep事件！！'+time);

   });

第三部：觸發事件

    在頁面添加三個按鈕，id爲別爲：walk，eat，sleep

   

Ext.get('walk').on('click',function(){

    person.fireEvent('walk');

    });

  Ext.get('eat').on('click',function(){

    person.fireEvent('eat','早餐','午飯','晚餐');

    });

  Ext.get('walk').on('click',function(){

    person.fireEvent('sleep',new Date());

    });

調用fireEvent函數就能夠根據事件名稱匹配而且觸發該事件。 上述代碼中說使用的方法都是繼承自Ext.util.Observable類。