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 判断脚本加载完毕的代码
Jul 13 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
vue获取form表单的值示例
Oct 29 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
用JS创建一个录屏功能
Nov 11 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP常用数组函数介绍
2014/07/28 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
json简单介绍
2008/06/10 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
跟老齐学Python之用Python计算
2014/09/12 Python
Python 登录网站详解及实例
2017/04/11 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python 实现dict转json并保存文件
2019/12/05 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python如何定义接口和抽象类
2020/07/28 Python
写好自荐信的几个要点
2013/12/26 职场文书
实习推荐信
2014/05/10 职场文书
企业领导对照检查材料
2014/08/20 职场文书
作弊检讨书
2015/01/27 职场文书
解除合同协议书范本
2016/03/21 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python