ExtJs事件（自定义事件、on、eventManager）示范
ExtJs事件（自定义事件、on、eventManager）示例body??????????link?relstylesheet?typetext/css?hre
ExtJs事件（自定义事件、on、eventManager）示例
- <body>??
- ????????<link?rel="stylesheet"?type="text/css"?href="../../../../resources/css/ext-all.css"?mce_href="resources/css/ext-all.css"?/>??
- ????????<mce:script?type="text/javascript"?src="../../../../ext/ext-base.js"?mce_src="ext/ext-base.js"></mce:script>??
- ????????<mce:script?type="text/javascript"?src="../../../../ext/ext-all.js"?mce_src="ext/ext-all.js"></mce:script>??
- ????????<div?style="padding:?10px?10px?10px?20px;"?mce_style="padding:?10px?10px?10px?20px;">??
- ????????????事件使用例子，包括自定义事件及on、addListener和EventManager的使用。??
- ????????</div>??
- ????????<div?id="eventTestDiv"?style="padding:?10px?10px?10px?20px;width:150px;height:50px;background-color:green;">??
- ????????????鼠标移到我试试！??
- ????????</div>??
- ????????<br>??
- ????????<div?style="padding:?10px?10px?10px?20px;"?mce_style="padding:?10px?10px?10px?20px;">??
- ????????????<input?type="button"?name="button1"?id="button1"?value="点我"?/>???
- ????????</div>??
- ????????<mce:script?type="text/javascript"?src="CustomEvent.js"?mce_src="CustomEvent.js"></mce:script>??
- ????</body> ?
- /****************************************?
- ?*?自定义事件使用?
- ?*/??
- var?Person?=?function(){??
- ????//?注册事件,该事件名字为：say??
- ????this.addEvents("say");??
- ????//?另外一种方式注册多个事件??
- ????this.addEvents({??
- ????????"run"?:?true,??
- ????????"see":?false??
- ????});??
- }??
- //?Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能??
- Ext.extend(Person,Ext.util.Observable);??
- ??
- //?定义相关执行的方法??
- var?speak?=?function(){??
- ????alert("I?can?speak!");??
- }??
- var?run?=?function(){??
- ????alert("I?can?run!");??
- }??
- var?see?=?function(){??
- ????alert("I?can?see?the?word!");??
- }??
- ??
- var?person?=?new?Person();??
- //?将方法say绑定到事件say上。二者名字可以不一样??
- person.on("say",?speak);??
- person.on("run",?run);??
- person.on("see",?see);??
- ??
- //?触发事件，这里只触发了say和run。see事件没有触发就不会发生??
- person.fireEvent("say");??
- person.fireEvent("run");??
- /*****************************************/??
- ??
- Ext.onReady(function()?{??
- ????//?返回的Element对象,不等价于document.getElementById(id)??
- ????//?Ext.getDom(id)才等价于document.getElementById(id)??
- ????var?eventTestDiv?=?Ext.get("eventTestDiv");??
- ????//?通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子??
- ????Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){??
- ????????Ext.Msg.alert('信息',?'Id：'?+?this.id?+?'<br>内容：'?+?this.innerHTML);??
- ????});??
- ????Ext.EventManager.addListener(eventTestDiv,"click",function(){??
- ????????Ext.Msg.alert('信息',?'Id：'?+?this.id??
- ????????????+?'<br>name：'?+?this.name??
- ????????????+?'<br>value：'?+?this.value);??
- ????});??
- ????/**?
- ?????使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项?
- ?????有4个配置选项:?
- ????????delay{Number}：?触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)；?
- ????????scope{Object}：?事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)；?
- ????????single{Boolean}：?true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)；?
- ????????buffer{Number}:?若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会?被启用，但是新处理器句柄会安排在其位置。?
- ????????以下的配置未用过：?
- ????????????delegate?{String}?:?一个简易选择符，用于过滤目标，或是查找目标的子孙。?
- ????????????stopEvent?{Boolean}?:?true表示为阻止事件。即停止传播、阻止默认动作。?
- ????????????preventDefault?{Boolean}?:?true表示为阻止默认动作。?
- ????????????stopPropagation?{Boolean}?:?true表示为阻止事件传播。?
- ????????????normalized?{Boolean}?:?false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。?
- ????*/??
- ????var?button1?=?Ext.get("button1");??
- ????//?addListener等价于on，on只是addListener的简写??
- ????button1.addListener("click",function(){??
- ????????//?获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象??
- ????????var?msg?=?'<br/>获取选填参数信息：<br/>选填参数个数：'?+?arguments.length?+?"<br/>";??
- ????????for(var?i?in?arguments[2])?{??
- ????????????msg?+=?i?+?"："?+?arguments[2][i]?+?"<br/>";??
- ????????}??
- ????????Ext.Msg.alert('信息',?'打印eventTestDiv的信息：<br/><br/>Id：'?+?this.id??
- ????????????+?"<br/>"?+?msg??
- ????????);??
- ????},eventTestDiv,?{??
- ????????//?事件延迟触发事件??
- ????????delay?:?500,??
- ????????//?是否只触发一次??
- ????????single:?false,??
- ????????msg???:?'我是追加的参数'??
- ????});??
- ????/**?
- ?????事件的几种写法（addListener和on是等价的）：?
- ?????var?fn?=?function?(){?
- ????????//?这里添加需要处理的逻辑?
- ?????};?
- ????//?第一种写法?
- ????button1.addListener("click",fn,button1);?
- ????button1.addListener("mouseover",fn,button1);?
- ?????
- ????//第二种写法?
- ????button1.on({?
- ????????click?????:?fn,?
- ????????mouseover?:?fn,?
- ????????scope?????:?button1?
- ????});?
- ???
- ????//第三种写法?
- ????button1.on({?
- ????????click?????:?{scope:button1,?delay:3000,?fn:fn},?
- ????????mouseover?:?{scope:button1,?delay:1000,?fn:fn}?
- ????});?
- ????*/??
- }) ?
