ExtJS4学习笔记七－－事件绑定相关

来源：互联网发布：淘宝买药一直是审核中编辑：程序博客网时间：2024/06/03 12:41

一、addListener方法

Javascript代码  
var button = Ext.get('btn');  
button.addListener('click',hello1);//绑定事件处理函数  
button.addListener('click',hello2);  

二、ExtJS支持的自定义事件

Javascript代码  
//创建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('发生了自定义事件');  
});  

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

自定义事件的另外一个例子：

Javascript代码  
//继承自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');//创建对象”代码之后的内容替换为：

Javascript代码  
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受管事件监听器：

Javascript代码  
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传播分发事件：

Javascript代码  
//创建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('服务员开始收拾盘子。');  
});  

Html代码  
<input type='button' value='员工吃饭' onclick='emp.eat()'>  

0 0