06extjs的事件机制

最新推荐文章于 2020-12-21 03:28:48 发布

团子大人156

最新推荐文章于 2020-12-21 03:28:48 发布

阅读量467

点赞数

分类专栏： extjs学习笔记

本文链接：https://blog.csdn.net/u013953289/article/details/34088335

版权

extjs学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

day06
事件机制
1.事件的3种绑定方式
	HTML/DHTML
	DOM
	EXTJS
2.Ext.util.Observable 事件的基类
	为所有支持事件机制的extjs组件提供事件的支持
	创建的组件需要有事件的支持的话需要继承它
	事件的分类：
		a.标准事件[键盘按钮按下，鼠标的单击双击，滑过拖动]
		b.业务事件[当面板收起的时候触发，当组件被销毁的时候触发，当每一个对象的属性值不为空的时候触发]
	一个自定义事件的例子
	1>没有用到事件处理的场景
	母亲问孩子饿不饿--》
					《--孩子
					饿了--给一瓶牛奶
					不饿--不给
	2>用了事件的场景
	母亲给孩子一瓶牛奶--》
					孩子拿到牛奶饿了就喝
					不饿就不喝
	角色功能分析：
			孩子--应该有自己能拿到牛奶判断喝不喝的方法，当母亲给他牛奶的时候调用这个方法
			那么孩子就要有一个业务事件时刻监听这母亲什么时候给自己牛奶
			母亲：调用孩子拿牛奶的方法，并且传入一瓶牛奶
3.addManagedListener 受管制的监听
	由调用的组件管理，当组件执行了销毁命令的时候所以被组件管制的事件全部销毁
4.relayEvents 事件的分发和传播
（控制实现事件在不同控件或对象内的传播）
	如孩子喝了牛奶，父亲带他去医院
5.事件对象Ext.EventObject
	不是一个单例，不能被直接new出来，会存活在事件处理的函数中
6.事件管理器Ext.EventManager
	可以更方便的为页面元素绑定事件处理函数
	方法：addListener 为元素增减事件



1.HTML/DHTML
<script>
	function hello(){
		alert("hello");
	}
</script>
<body>
	<input type="button" id="btn1" onClick="hello()"/>
</body>

2.DOM
eventBinding.js
(function(){
	Ext.onReady(function(){
		if(Ext.isIE){
			document.getElementById("btn1").attachEvent("onclick",function(){//仅支持IE
				alert("DOM绑定事件");
			});
		}else{
			document.getElementById("btn1").addEventListener("click",function(){//仅支持FF
				alert("DOM绑定事件");
			});
		}				
	});
})();

3.EXTJS
Ext.get("btn1").on("click",function(){
	alert("extjs绑定事件");
});//可跨浏览器


4.自定义事件监听
customEvent.js
(function(){
	Ext.onReady(function(){
		Ext.define("children",{
			extend:'Ext.util.Observable',
			constructor:function(){
				this.state = "hungry",//目前所属的状态
				this.setMilk = function(milk){
					this.fireEvent('hungry',milk);//调用事件
				},
				this.addEvent({'hungry':true}),//声明事件，或事件初始化
				this.addListener("hungry",function(milk){//注册事件，添加监听
					if(this.state == 'hungry'){
						this.drink(milk);
					}else{
						alert("我不饿");
					}
				}),
				this.drink = function(milk){
					alert("喝了牛奶");
				}
			}
		});
		var children = Ext.create("children",{});
		Ext.util.Observable.capture(children,function(eventName){
			if(eventName == "hungry"){
				alert("牛奶过敏");
				return false;
			}else{
				return true;
			}
		});//事件拦截方法,静态可以这么调用
		
		//母亲调用孩子的接收牛奶的方法
		children.setMilk("milk");
	});
	/**为对象添加一个事件addEvents
	-->事件的监听方式注册这个事件addListener
	-->触发了这个事件的动作fireEvent*/
})();


5.addManagedListener
//简单工具条实例
(function(){
	Ext.onReady(function(){
		var tbar = Ext.create('Ext.toolbar.Toolbar',{
			renderTo:Ext.getBody(),//把工具条渲染到body组件上
			width:500,
			items:[
				{xtype:'button',id:'create',text:'create'/**,handler:function(){
					alert('创建');
				}*/},
				{xtype:'button',id:'delete',text:'delete'/**,handler:function(){
					alert('删除');
				}*/},
				{xtype:'button',id:'destroy',text:'destroy',handler:function(){
					var c = Ext.getCmp('delete');
					if(c){
						c.destroy();
					}
				}}
			]
		});

		var deleteB = Ext.getCmp('delete');
		deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){//delete组件管理create组件的click事件
			alert('添加操作');
		});
		//有别于Ext.getCmp('create').on('click',function(){});
	});
})();


6.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',{});
father.relayEvents(children,['hungry']);//children结束完hungry事件操作后，事件流入到father
father.on('hungry',function(){
	alert('去医院');
});


7.Ext.EventObject
Ext.onReady(function(){
	var b = Ext.get('btn4');
	b.on('click',function(e){
		alert(e.getPageX());//鼠标具体位置
	});
});


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

团子大人156

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06extjs的事件机制

day06事件机制1.事件的3种绑定方式 HTML/DHTML DOM EXTJS2.Ext.util.Observable 事件的基类为所有支持事件机制的extjs组件提供事件的支持创建的组件需要有事件的支持的话需要继承它事件的分类： a.标准事件[键盘按钮按下，鼠标的单击双击，滑过拖动] b.业务事件[当面板收起的时候触发，当组件被销毁的时候触发，当每一个对象的
复制链接

扫一扫

专栏目录