ExtJS自定义事件

ExtJS自定义事件类为Ext.util.Observable

• 最简单的自定义事件

Ext.onReady(function(){
 	var win = Ext.create('Ext.window.Window',{
 		title:'简单的自定义事件',
 		width:400,
 		height:300,
 		renderTo:Ext.getBody(),
 		listeners: {
 			show:function(){
 				// t3:触发自定义事件的时机
 				win.fireEvent('myEvent');
 			}
 		}
 	});
 	
 	// t1: 为组件添加事件类型
 	win.addEvents('myEvent');
 	// t2:为组件添加事件监听
 	win.on('myEvent', function(){
 		alert('myEvent...');
 	});
 
 	win.show();
});

• 为自定义的类添加事件类型

Ext.onReady({
 	Ext.define('Employee', {
 		mixins: {
 			observable: 'Ext.util.Observable'
 		},
 		
 		constructor: function(config){
 			this.mixins.observable.constructor.call(this, config);
 			
 			this.addEvents('fired', 'quit');
 		}
 		
 	});
 	
 	//	实例化
 	var emp = new Employee({
 		listeners:{
 			quit:function(){
 				alert('quit!');
 			}
 		}
 	});
 	
 	emp.fireEvent('quit');

});

• 事件的转发机制

Ext.onReady({
	var win = Ext.create('Ext.Window', {
		title:'事件的转发机制',
		width:300,
		height:200,
		renderTo:Ext.getBody(),
		listeners:{
			myEvent:function(){
				alert('customize event...');
			}
		}
	});
	
	var btn = Ext.create('Ext.button.Button', {
		text:'按钮',
		renderTo:Ext.getBody(),
		handler:function(){
			btn.fireEvent('myEvent');
		}
	});

	win.show();
	//	事件的转发机制： 
	win.relayEvents(btn, ['myEvent']);
/**
relayEvents(origin, events, prefix)

Relays selected events from the specified Observable as if the events 
 were fired by `this`. For example if you are extending Grid, you might 
 decide to forward some events from store. So you can do this inside 
 your initComponent: this.relayEvents(this.getStore(), ['load']); The grid 
 instance will then have an observable 'load' event which will be passed 
 the parameters of the store's load event and any function fired with the 
 grid's load event would have access to the grid using the `this` keyword. 
Parameters:
	{Object} origin The Observable whose events this object is to 
	 relay.
	{String[]} events Array of event names to relay.
	{String} [prefix] A common prefix to prepend to the event 
	 names. For example: this.relayEvents(this.getStore(), ['load', 'clear'], 
	 'store'); Now the grid will forward 'load' and 'clear' events of store as 
	 'storeload' and 'storeclear'.
*/
});

• single配置项的使用：单次运行监听器

Ext.onReady({
 	var win = Ext.create('Ext.Window',{
 		title:'单次执行监听器的使用',
 		width:300,
 		height:200,
 		renderTo:Ext.getBody(),
 		listeners:{
 			render:function(){
 				alert('把组件渲染到body，只执行一次');
 			},
 			single:true, // 当前的事件监听只执行一次，执行完成之后就自动销毁了
 			delay:3000 //	延迟执行事件监听
 		}
 	});
 	
 	win.show();
});

• 事件的挂起和恢复

Ext.onReady({
 	var btn1 = Ext.create('Ext.button.Button', {
 		text:'挂起',
 		renderTo:Ext.getBody(),
 		handler:function(){
 			btn3.suspendEvents();//挂起btn3组件的事件
 		}
 	});
 	
 	var btn2 = Ext.create('Ext.button.Button', {
 		text:'恢复',
 		renderTo:Ext.getBody(),
 		handler:function(){
 			btn3.resumeEvents();//恢复btn3组件的事件
 		}
 	});
 	
 	var btn3 = Ext.create('Ext.button.Button', {
 		text:'按钮',
 		renderTo:Ext.getBody(),
 		listeners:{
 			'mouseover': function(){
 				alert('execute...');
 			}
 		}
 	});
});

说明：
Ext的事件主要做了三个重要工作：
1、屏蔽了浏览器的差异； 2、原生事件和自定义事件可以并行的自由使用；3、强大的扩展性。
可以说，Ext是运行在Observable这个类之上的，Ext中大部分的类都需要混入Ext.util.Observable，从而提供对事件的支持。