博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

extjs4 事件处理

Posted on 2011-11-09 23:22  linFen  阅读(11333)  评论(2)  编辑  收藏  举报

一、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');//创建对象   
  14.   
  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.     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);  
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代码 复制代码 收藏代码
  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. });  
//创建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);//绑定处理函数