Extjs学习笔记(七) 事件

1.传统事件绑定回顾

1.1第一种

<script type="text/javascript">
	function hello(){
	      alert('hello word');
	}
</script>

html 调用
<input type="button" id="btn1" value="第一种事件绑定方式" onClick="hello()">

 1.2第二种

if(Ext.isIE){
	document.getElementById("btn2").attachEvent("onclick",function(){
			alert("第二种事件绑定方式");
	});
}else{
	document.getElementById("btn2").addEventListener("click",function(){
			alert("第二种事件绑定方式");
	});		
}

 

2.EXT方法

Ext.get('btn3').on("click",function(){ //get dom 中ID
	alert("第三种事件绑定方式");
})

 

3.自定义 EXT事件 和 事件拦截

    要让一个组件具有事件机制，必须先继承Ext.util.Observale

业务逻辑：

一个自定义事件的例子   
没有用到事件处理的场景：
        母亲问孩子和不饿-->
                 <-- 孩子
                    饿了-->给一瓶牛奶
                    不饿-->不给

 

事件场景：
        母亲给孩子一个瓶牛奶-->
                        孩子拿到牛奶感觉饿了就喝
                        感觉不饿就不喝
       
角色功能分析:
            孩子:应该有自己能拿到牛奶判断饿不饿的方法,当母亲给他牛奶的时候调用这个方法.
            那么孩子就要有一个业务事件时刻监听这母亲什么时候给自己牛奶
            母亲:调用孩子拿牛奶的方法,并且传入一瓶牛奶

 

(function(){
	Ext.onReady(function(){
		Ext.define("children",{
			extend:'Ext.util.Observable',
			constructor:function(){
				this.state = "hungry";//目前所属的状态 full
				//调用setMilk方法就可以触发hungry事件
				this.setMilk = function(milk){
				    //（3）触发一个事件 调用
					this.fireEvent('hungry',milk);
				};
				//（1）注册一个事件 children对外有这样一个事件  声明
				this.addEvents({'hungry':true});
				//（2）注册
				this.addListener("hungry",function(milk){
					if(this.state == 'hungry'){
						this.drink(milk);
					}else{
						alert("我不饿");				
					}
				});
				this.drink = function(milk){
					alert("我喝掉了一瓶牛奶: "+milk);
				};
			}
		});
	   /**
	    * 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发了这个事件的动作fireEvent
	   */
		
		var children = Ext.create("children",{});//本对象是牛奶过敏的对象
		Ext.util.Observable.capture(children,function(eventName){ //事件拦截
			if(eventName == "hungry"){
				alert('这个孩子牛奶过敏不能和牛奶...');
				return false;
			}else{
				return true;
			}
		})
		//母亲调用孩子的接受牛奶的方法
		children.setMilk("三鹿牛奶");
		
	});
	
})();

 

4.addManagedListener 收管制的监听

 他是由调用的组建管理的,当组建执行了销毁命令的时候所有被组建管制的事件全部销毁

(function(){
	Ext.onReady(function(){
		var tbar = Ext.create('Ext.toolbar.Toolbar',{
			renderTo:Ext.getBody(),
			width:500,
			items:[
				{xtype:'button',id:'create',text:'create'},
				{xtype:'button',id:'delete',text:'delete'},
				{xtype:'button',text:'销毁删除按钮',handler:function(){
					var c = Ext.getCmp("delete");
					if(c){
						c.destroy();
					}
				}}			
			]
		});
		var deleteB = Ext.getCmp("delete");
		deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){  //将Ext.getCmp("create")
组件的“click”操作，交给deleteB管理。
			alert('添加操作');
		});
		//Ext.getCmp("create").on("click",function(){});
	});
})();

 

5.relayEvents 事件的分发和传播(控制实现事件在不同空间或对象内的传播)
    比如说孩子喝完三鹿就去医院呀,老爸就要带着去医院（老爸继续孩子喝牛奶的事件）

               //父亲类没有声明过任何监听事件
		Ext.define("father",{
			extend:'Ext.util.Observable',
			constructor:function(config){
				this.listeners = config.listeners;
				this.superclass.constructor.call(this,config);
			}
		});
		var father = Ext.create("father",{});
		//把children的事件传播给father
		father.relayEvents(children,['hungry']);
		father.on("hungry",function(){
			alert("送喝了三鹿的孩子去医院..");
		});

 

6.事件对象Ext.EventObject
    不是一个单例,不能被直接new出来,他会存活早事件处理的函数中

Ext.onReady(function(){
	var b = Ext.get("btn4");
	b.on("click",function(e){ //e 为事件对象
		alert(e.getPageX())
	});
})

 

7.事件管理器Ext.EventManager

更方便的为页面元素绑定事件处理函数

Ext.onReady(function(){
	Ext.EventManager.addListener("btn5",'click',function(){
		alert("通过事件管理器进行事件的监听注册");
	})
})