ExtJS4學習筆記七－－事件綁定相關

一、addListener方法 

var button = Ext.get('btn');
button.addListener('click',hello1);//綁定事件處理函數
button.addListener('click',hello2);

二、ExtJS支持的自定義事件 

//創建Person類
var Person = Ext.extend(Ext.util.Observable,{
    constructor : function(name){
       this.name = name;
       this.sayNum = 0;
       this.say = function(){
            if(this.sayNum < 2){
                this.sayNum += 1;
                alert('I am '+name);
            }else{
                this.sayNum = 0;//觸發自定義事件後計數器歸零
                this.fireEvent('onSay',this);//激發自定義事件
            }
       }
       this.addEvents({//加入自定義事件
          "onSay" : true
       });
    }
});
var per = new Person('tom',3);//創建對象
//爲自定義事件綁定處理函數
per.addListener('onSay',function handler(){
    alert('發生了自定義事件');
});

<input type='button' value='say' onclick='per.say()'>

自定義事件的另外一個例子： 

//繼承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
    constructor : function(name){
       this.name = name;
       this.say = function(){
            this.fireEvent('onSay',this.name);//激發自定義事件
       }
       this.addEvents({//加入自定義事件
          "onSay" : true
       });
    }
});
var per = new Person('tom');//創建對象

//爲自定義事件綁定處理函數
per.addListener('onSay',function(name){
    alert("I'am " + name);
});

攔截器使用示例Observable.capture，與上面例子不同的地方是“var per = new Person('tom');//創建對象”代碼之後的內容替換爲： 

per.addListener('onSay',handler);//爲自定義事件綁定處理函數
function handler(){//事件處理函數
    alert('發生了自定義事件');
}
//爲per對象添加攔截器
Ext.util.Observable.capture(per,captureFunction);
//攔截函數
function captureFunction(eventName){
    if(eventName == 'onSay'){//事件名稱是onSay則返回false終止事件的執行
        alert("攔截事件：“"+eventName+"”。");
        return false;
    }
    return true;
}

三、addManagedListener受管事件監聽器： 

function createFn(){
    alert('新建');
}
function openFn(){
    alert('打開');
}
function saveFn(){
    alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//創建工具欄
    renderTo: Ext.getBody(),
    bodyPadding: 5,
    width:300,
    items : [
        {text:'新建',id:'createBtn',iconCls:'newIcon'},
        {text:'打開',id:'openBtn',iconCls:'openIcon'},
        {text:'保存',id:'saveBtn',iconCls:'saveIcon'},
        {text:'銷燬新建按鈕',handler : function(){
            //銷燬新建按鈕
            Ext.getCmp('createBtn').destroy();
        }}
    ]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件綁定將受createBtn組件是否銷燬的控制，如果createBtn組件銷燬
//了則事件綁定同時解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);

四、relayEvents傳播分發事件： 

//創建Employee工人類
var Employee = Ext.extend(Ext.util.Observable,{
    constructor : function(config){
       this.name = config.name;
       this.eat = function(){
            this.fireEvent('startEat',this);//激發開始吃飯事件
            this.fireEvent('finishEat',this);//激發結束吃飯事件
       }
       this.addEvents({//加入自定義事件
          "startEat" : true,//開始吃飯事件
          "finishEat" : true//結束吃飯事件
       });
       Employee.superclass.constructor.call(this, config)
    }
});

//定義Waiter服務員類
var Waiter = Ext.extend(Ext.util.Observable,{
    constructor : function(config){
        Waiter.superclass.constructor.call(this, config);
    }
});
//創建員工對象
var emp = new Employee({name:'tom'});
//爲自定義事件綁定處理函數
emp.addListener('startEat',function(){
    alert(this.name + '開始吃飯了。');
});
emp.addListener('finishEat',function (){
    alert(this.name + '吃完飯，可以收拾盤子了。');
});
//創建服務員對象
var waiter = new Waiter();
//使服務員對象與員工對象的finishEat事件進行關聯
//也就是說當員工對象的finishEat事件發生後，先執行自身的事件監聽器，
//然後事件會傳遞到服務員對象中，激發服務員對象的finishEat事件。
waiter.relayEvents(emp, ['finishEat']);
waiter.on('finishEat',function(){
    alert('服務員開始收拾盤子。');
});

<input type='button' value='員工吃飯' onclick='emp.eat()'>

五、Ext.EventObject示例 

var btn = Ext.get('buttonTest');
btn.addListener('click',handler);//爲click事件綁定處理函數
function handler(e){//事件處理函數
    //獲取事件發生時的x座標
    var x = e.getPageX();
    //獲取事件發生時的y座標
    var y = e.getPageY();
    var msg = '事件發生座標 : x='+x+' y='+y;
    alert(Ext.EventManager.getPageXY(e));
    alert(msg);
}

六、Ext.EventManager使用 

Ext.EventManager.addListener('btn','click',handler);//綁定處理函數