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


Posted in Javascript onOctober 24, 2010

代码实现的目的:为一个自定义的类的某个属性在使用它时候,触发某个事件。
该程序的效果:点击输入按钮,弹出一个脚本提示输入框让用户输入他的姓名,确定后,用户录入的姓名会显示在页面的姓名文本框中,并且页面标题变成和姓名一致,接着再弹出脚本提示输入框让用户输入性别,录入完毕并点击确定后,用户录入的性别将会显示在页面的性别文本框里。

<!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

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 #Javascript
javascript textContent与innerText的异同分析
Oct 22 #Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 #Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 #Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 #Javascript
jQuery中add实现同时选择两个id对象
Oct 22 #Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 #Javascript
You might like
php实现aes加密类分享
2014/02/16 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
动手学习无线电
2021/03/10 无线电
Javascript 自定义类型方法小结
2010/03/02 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
JavaScript中this详解
2015/09/01 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python面向对象类继承和组合实例分析
2018/05/28 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
结婚典礼证婚词
2014/01/11 职场文书
员工三分钟演讲稿
2014/08/19 职场文书