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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
php 设计模式之 单例模式
2008/12/19 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python可变参数函数用法实例
2015/07/07 Python
Python的标准模块包json详解
2017/03/13 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
实习生岗位职责
2014/04/12 职场文书
《白鹅》教学反思
2014/04/13 职场文书
心得体会的写法
2014/09/05 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang