ExtJs事件机制基本代码模型和流程解析

代码实现的目的：为一个自定义的类的某个属性在使用它时候，触发某个事件。该程序的效果：点击输入按钮，弹出一个脚本提示输入框让用户输入他的姓名，确定后，用户录入的姓名会显示在页面的姓名文本框中，并且页面标题变成和姓名一致，接着再弹出脚本提示输入框让用户输入性别，录入完毕并点击确定后，用户录入的性别将会显示在页面的性别文本框里。复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="ext-all.css" /> <title>事件</title> <script type="text/javascript" src="/adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="/ext-all.js"> </script> <script type="text/javascript" src="Person.js"> </script> <script type="text/javascript"> var _person = null ; //按钮点击后触发 button_click = function(){ _person.setName(prompt("请输入姓名:" , "")) ; _person.setSex(prompt("请输入性别:" , "")) ; } //页面加载完进行的处理 Ext.onReady(function(){ //获取控件对象 var txt_name = Ext.get("txt_name") ; var txt_sex = Ext.get("txt_sex") ; //新建一个Person对象 _person = new Ext.dojochina.Person() ; //为对象实现事件处理方法 //JS里进行激发，这里进行事件触发后的处理 _person.on("namechange" , function(_person , _old , _new){ txt_name.dom.value = _new ; alert(_person.getName()); }) ; _person.on("sexchange" , function(_person , _old , _new){ txt_sex.dom.value = _new ; }) ; _person.on("namechange" , function(_person , _old , _new){ document.title = _new ; }) ; }) ; </script> </head> <body> 姓名:<input type="text" id="txt_name" maxlength="10"/><br/> 性别:<input type="text" id="txt_sex" maxlength="10"/><br/> <input type="button" value="输入" onclick="button_click()"/> </body> </html> 复制代码代码如下: Ext.namespace("Ext.dojochina") ; //定义一个类 Ext.dojochina.Person = function(){ //为类添加事件方法 this.addEvents( "namechange", "sexchange" ) ; } ; //Person类继承于 Observable Ext.extend(Ext.dojochina.Person , Ext.util.Observable , { name:"", sex:"", //属性 setName:function(_name){ if(this.name != _name){ //为对象设置新的name this.name = _name ; //激发起名字为namechange的事件，后面是传的三个参数 this.fireEvent("namechange" , this , this.name , _name) ; } }, setSex:function(_sex){ if(this.sex != _sex){ this.sex = _sex ; //同上 this.fireEvent("sexchange" , this , this.sex , _sex) ; } }, getName:function(){ return this.name; } }) ; 由以上具有代表性的代码中可以总结出，一个类要想绑定event事件，最基本和常见的程序设计流程是这样的： 1、需要在声明对象时候使用如下方法进行声明要绑定的事件名称；复制代码代码如下: this.addEvents( "namechange", "sexchange" 2、将自定义的类继承于Ext.util.Observable，并且实现想要触发1中定义的事件名的属性(或者说是方法)；复制代码代码如下: setName:function(_name){ if(this.name != _name){ //为对象设置新的name this.name = _name ; //激发起名字为namechange的事件，后面是传的三个参数 this.fireEvent("namechange" , this , this.name , _name) ; } }, 注意这里的：this.fireEvent("namechange" , this , this.name , _name) ; 是触发事件的最直观入口。当方法执行到这里时候，将会激发名字为namechange的事件。 3 实现事件触发后的处理逻辑。复制代码代码如下: _person.on("namechange" , function(_person , _old , _new){ txt_name.dom.value = _new ; alert(_person.getName()); }) ; 这里的on是Extjs内置方法，当触发了名字为namechange的事件时候，将会执行function函数，而这里的function的参数，则是由JS里的this.fireEvent("namechange" , this , this.name , _name) ; 后面三个参数传来的。好，一个EXTJS最简单经典的事件触发机制程序代码设计流程就是这样的，而代码执行的流程，则是一个逆推的过程了。欢迎与广大EXTJS爱好者进行交流，我的QQ：1213145055。本文章作者：王崇安，博客地址：http://www.cnblogs.com/wangchongan

　　推荐阅读

　　兼容IE与firefox火狐的回车事件(js与jquery)

javascript 兼容IE与firefox火狐的回车事件复制代码代码如下: <script language="javascript"> function keypress(e) { var currKey=0,e=e||event; if(e.keyCode==13)document.myform.submit(); } document.onkey>>>详细阅读

本文标题：ExtJs事件机制基本代码模型和流程解析

地址：http://www.17bianji.com/kaifa2/JS/25559.html

1/2 1