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

一、addListener方法 

Javascript代码  

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

二、ExtJS支持的自定义事件 

Javascript代码  

1. //创建Person类  
2. var Person = Ext.extend(Ext.util.Observable,{  
3.     constructor : function(name){  
4.        this.name = name;  
5.        this.sayNum = 0;  
6.        this.say = function(){  
7.             if(this.sayNum < 2){  
8.                 this.sayNum += 1;  
9.                 alert('I am '+name);  
10.             }else{  
11.                 this.sayNum = 0;//触发自定义事件后计数器归零  
12.                 this.fireEvent('onSay',this);//激发自定义事件  
13.             }  
14.        }  
15.        this.addEvents({//加入自定义事件  
16.           "onSay" : true  
17.        });  
18.     }  
19. });  
20. var per = new Person('tom',3);//创建对象  
21. //为自定义事件绑定处理函数  
22. per.addListener('onSay',function handler(){  
23.     alert('发生了自定义事件');  
24. });  

Html代码  

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

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

Javascript代码  

1. //继承自Ext.util.Observable  
2. var Person = Ext.extend(Ext.util.Observable,{  
3.     constructor : function(name){  
4.        this.name = name;  
5.        this.say = function(){  
6.             this.fireEvent('onSay',this.name);//激发自定义事件  
7.        }  
8.        this.addEvents({//加入自定义事件  
9.           "onSay" : true  
10.        });  
11.     }  
12. });  
13. var per = new Person('tom');//创建对象  
14.   
15. //为自定义事件绑定处理函数  
16. per.addListener('onSay',function(name){  
17.     alert("I'am " + name);  
18. });  

拦截器使用示例Observable.capture，与上面例子不同的地方是“var per = new Person('tom');//创建对象”代码之后的内容替换为： 

Javascript代码  

1. per.addListener('onSay',handler);//为自定义事件绑定处理函数  
2. function handler(){//事件处理函数  
3.     alert('发生了自定义事件');  
4. }  
5. //为per对象添加拦截器  
6. Ext.util.Observable.capture(per,captureFunction);  
7. //拦截函数  
8. function captureFunction(eventName){  
9.     if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行  
10.         alert("拦截事件：“"+eventName+"”。");  
11.         return false;  
12.     }  
13.     return true;  
14. }  

三、addManagedListener受管事件监听器： 

Javascript代码  

1. function createFn(){  
2.     alert('新建');  
3. }  
4. function openFn(){  
5.     alert('打开');  
6. }  
7. function saveFn(){  
8.     alert('保存');  
9. }  
10. Ext.create('Ext.toolbar.Toolbar',{//创建工具栏  
11.     renderTo: Ext.getBody(),  
12.     bodyPadding: 5,  
13.     width:300,  
14.     items : [  
15.         {text:'新建',id:'createBtn',iconCls:'newIcon'},  
16.         {text:'打开',id:'openBtn',iconCls:'openIcon'},  
17.         {text:'保存',id:'saveBtn',iconCls:'saveIcon'},  
18.         {text:'销毁新建按钮',handler : function(){  
19.             //销毁新建按钮  
20.             Ext.getCmp('createBtn').destroy();  
21.         }}  
22.     ]  
23. });  
24. var createBtn = Ext.getCmp('createBtn');  
25. createBtn.on('click',createFn);  
26. //以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁  
27. //了则事件绑定同时解除。  
28. createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);  
29. createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);  

四、relayEvents传播分发事件： 

Javascript代码  

1. //创建Employee工人类  
2. var Employee = Ext.extend(Ext.util.Observable,{  
3.     constructor : function(config){  
4.        this.name = config.name;  
5.        this.eat = function(){  
6.             this.fireEvent('startEat',this);//激发开始吃饭事件  
7.             this.fireEvent('finishEat',this);//激发结束吃饭事件  
8.        }  
9.        this.addEvents({//加入自定义事件  
10.           "startEat" : true,//开始吃饭事件  
11.           "finishEat" : true//结束吃饭事件  
12.        });  
13.        Employee.superclass.constructor.call(this, config)  
14.     }  
15. });  
16.   
17. //定义Waiter服务员类  
18. var Waiter = Ext.extend(Ext.util.Observable,{  
19.     constructor : function(config){  
20.         Waiter.superclass.constructor.call(this, config);  
21.     }  
22. });  
23. //创建员工对象  
24. var emp = new Employee({name:'tom'});  
25. //为自定义事件绑定处理函数  
26. emp.addListener('startEat',function(){  
27.     alert(this.name + '开始吃饭了。');  
28. });  
29. emp.addListener('finishEat',function (){  
30.     alert(this.name + '吃完饭，可以收拾盘子了。');  
31. });  
32. //创建服务员对象  
33. var waiter = new Waiter();  
34. //使服务员对象与员工对象的finishEat事件进行关联  
35. //也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，  
36. //然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。  
37. waiter.relayEvents(emp, ['finishEat']);  
38. waiter.on('finishEat',function(){  
39.     alert('服务员开始收拾盘子。');  
40. });  

Html代码  

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