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 相关文章推荐
JQuery for与each性能比较分析
May 14 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
php session 写入数据库
2016/02/13 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python自带的http模块详解
2016/11/06 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android