Extjs的事件机制

下面是一个简单的事件定义，定义一个孩子的类。

 

(function(){
	Ext.onReady(function(){
		//定义一个孩子的类，赋予其喝牛奶的事件				 
		Ext.define("children",{
			extend:'Ext.util.Observable',//这个类提供了 addEvents addListener fireEvent函数
			constructor:function(){
				this.state="hungry",//一个状态 标志 其饿不饿。
				this.setMilk=function(milk){
					this.fireEvent('ishungry',milk);//触发这个事件
				},
				this.addEvents({'ishungry':true}),//添加一个事件
				this.addListener('ishungry',function(milk){//注册这个事件 并为事件添加处理函数
					if (this.state=='hungry')//判断其饿不饿
					{
						this.drink(milk);
					}
					else
					{
						alert("孩子不饿");
					};
				}),
				this.drink=function(milk){
					alert("喝掉一瓶:"+milk)	
				}
			},
		});
		//为这个孩子类创建一个实例。
		var children=Ext.create('children',{});
		children.setMilk("三鹿牛奶");
	});		  
})();

 下面是添加一个静态的拦截器，控制事件。

(function(){
	Ext.onReady(function(){
		//定义一个孩子的类，赋予其喝牛奶的事件				 
		Ext.define("children",{
			extend:'Ext.util.Observable',//这个类提供了 addEvents addListener fireEvent函数
			constructor:function(){
				this.state="hungry",//一个状态 标志 其饿不饿。
				this.setMilk=function(milk){
					this.fireEvent('ishungry',milk);//触发这个事件
				},
				this.addEvents({'ishungry':true}),//添加一个事件
				this.addListener('ishungry',function(milk){//注册这个事件 并为事件添加处理函数
					if (this.state=='hungry')//判断其饿不饿
					{
						this.drink(milk);
					}
					else
					{
						alert("孩子不饿");
					};
				}),
				this.drink=function(milk){
					alert("喝掉一瓶:"+milk)	
				}
			},
		});
		//为这个孩子类创建一个实例。
		var children=Ext.create('children',{});
		
		//静态拦截器 为children实例 添加一个静态的事件
		Ext.util.Observable.capture(children,function(eventName){ 
			if (eventName="hungry")	
			{
				alert('这个孩子不能喝牛奶')
				return false;
			}
			else
			{
				return true;
			};
		});
		
		children.setMilk("三鹿")
		
	});		  
})();

下面一个例子 介绍 addManagedListener 的用法：一个组件管理另一个组件的事件。如下图 ‘删除’ 按钮定义了 ‘创建’按钮的事件，一旦‘删除’按钮被删除，那么‘创建’按钮的事件，将消失。

 

// JavaScript Document
(function(){
	Ext.onReady(function(){	  
		var tbar=Ext.create('Ext.toolbar.Toolbar',{
			renderTo:Ext.getBody(),
			width:500,
			items:[
				{xtype:'button',id:'create',text:'创建'},
				{xtype:'button',id:'delete',text:'删除'},
				{xtype:'button',text:'销毁删除按钮',handler:function(){
					var c=Ext.getCmp('delete');
					if (c){
						c.destroy();
					};
				}}
			],
		});
		//由 “删除” 按钮 控制 “创建” 按钮的事件。 一旦“删除”按钮被删除，那么其管理下的“创建”按钮的事件，也会被删除
		var delete_button=Ext.getCmp('delete');
		//添加一个该事件的管理
		delete_button.addManagedListener(Ext.getCmp('create'),'click',function(){
			alert('添加操作');																	   
		});
	});
})();

 

 

下面这个实例，讲述了事件的分发与传播，relayEvents

父亲类没有定义任何对象，是通过 子类的 事件传递过来的。并对子类的事件进行扩展和衍生。

 

(function(){
	Ext.onReady(function(){
		//定义一个孩子的类，赋予其喝牛奶的事件				 
		Ext.define("children",{
			extend:'Ext.util.Observable',//这个类提供了 addEvents addListener fireEvent函数
			constructor:function(){
				this.state="hungry",//一个状态 标志 其饿不饿。
				this.setMilk=function(milk){
					this.fireEvent('ishungry',milk);//触发这个事件
				},
				this.addEvents({'ishungry':true}),//添加一个事件
				this.addListener('ishungry',function(milk){//注册这个事件 并为事件添加处理函数
					if (this.state=='hungry')//判断其饿不饿
					{
						this.drink(milk);
					}
					else
					{
						alert("孩子不饿");
					};
				}),
				this.drink=function(milk){
					alert("喝掉一瓶:"+milk)	
				}
			},
		});
		//为这个孩子类创建一个实例。
		var children=Ext.create('children',{});
		
		//定义一个父亲类，该没有声明过任何 监听事件
		Ext.define('father',{
			extend:'Ext.util.Observable',
			constructor:function(config){//这是一个标准的constructor的写法
				this.listeners=config.listeners;
				this.superclass.constructor.call(this,config);//调用父类的构造方法
			}
		});
		//实例化一个父亲的类
		var father=Ext.create('father',{});
		//创建一个事件分发和传播
		father.relayEvents(children,['ishungry']);
		
		father.on('ishungry',function(){
			alert('送孩子去医院');						
		});
		
		children.setMilk('三鹿')
		
	});		  
})();

 

//获取传统事件的方式 通过这个方式，可以实现，获取 按钮的位置，按下了那个键。

 

//获取传统事件的方式
(function(){
	Ext.onReady(function(){
		var b=Ext.get('btn4');//通过DOM获取ID
		b.on('click',function(e){//e是 Ext.EventObject对象
			alert(e);					  
		})
	});		  
})();




 
通过事件管理器来注册绑定事件到指定按钮。

 
// JavaScript Document
Ext.onReady(function(){
	Ext.EventManager.addListener('btn5','click',function(){
		alert("通过事件管理器，进行事件的绑定")													 
	})				 
});