extjs4 事件处理

extjs4 事件处理
一、addListener方法
Javascript代码
1. var button = Ext.get('btn');
2. button.addListener('click',hello1);//绑定事件处理函数
3. button.addListener('click',hello2);
```
var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
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. });
```
//创建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代码
1. <input type='button' value='say' onclick='per.say()'>
```
<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');//创建对象
15. //为自定义事件绑定处理函数
16. per.addListener('onSay',function(name){
17. alert("I'am " + name);
18. });
```
//继承自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代码
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. }
```
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代码
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. 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);
```
function createFn(){
	alert('新建');
}
function openFn(){
	alert('打开');
}
function saveFn(){
	alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
	renderTo: Ext.getBody(),
	bodyPadding: 5,
	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代码
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. });
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. });
```
//创建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代码
1. <input type='button' value='员工吃饭' onclick='emp.eat()'>
```
<input type='button' value='员工吃饭' onclick='emp.eat()'>
```
五、Ext.EventObject示例
Javascript代码
1. var btn = Ext.get('buttonTest');
2. btn.addListener('click',handler);//为click事件绑定处理函数
3. function handler(e){//事件处理函数
4. //获取事件发生时的x坐标
5. var x = e.getPageX();
6. //获取事件发生时的y坐标
7. var y = e.getPageY();
8. var msg = '事件发生坐标 : x='+x+' y='+y;
9. alert(Ext.EventManager.getPageXY(e));
10. alert(msg);
11. }
```
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使用
Javascript代码
1. Ext.EventManager.addListener('btn','click',handler);//绑定处理函数
相关阅读:
【CSS】flex 布局 justifycontent：spacebetween；解决最后一排数量不够自动向两端排列问题
 【Vue】NavBar 顶部弹窗点击弹窗击空白区域关闭弹窗实现
 【patchpackage】基本使用，给修改的 node_modules 下源码“打补丁”
【FSResizer】faststone下图片神器
 【pandas】按照数据列中元素出现的先后顺序进行分组排列（最后一种个人原创)
【PC】微信多开bat
【正则表达式应用】不规则多维数组展平一维
 【首发】【Navicat premium 16】激活完整记录
 【原创】彻底解决GitHub访问慢的问题（只需三招）
【Edge浏览器】8大隐藏功能，开启更好用
原文地址：https://www.cnblogs.com/luluping/p/2243768.html