ExtJs事件机制基本代码模型和流程解析
时间：2024-05-03 15:59:14
代码实现的目的：为一个自定义的类的某个属性在使用它时候，触发某个事件。
该程序的效果：点击输入按钮，弹出一个脚本提示输入框让用户输入他的姓名，确定后，用户录入的姓名会显示在页面的姓名文本框中，并且页面标题变成和姓名一致，接着再弹出脚本提示输入框让用户输入性别，录入完毕并点击确定后，用户录入的性别将会显示在页面的性别文本框里。
<!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
标签：ExtJs,事件机制
0
投稿猜你喜欢
Python 生成VOC格式的标签实例
2021-09-09 04:39:07
有关perl正则表达式的一些杂项
2023-08-08 01:12:11
Python configparser模块常用方法解析
2021-07-08 17:31:11
表单系列·出错字段排行榜
2008-07-01 12:57:00
JavaScript 如何在线解压 ZIP 文件
2024-04-22 22:14:58
在函数间不能传递32个以上参数的疑难问题
2008-12-31 13:31:00
Extjs显示从数据库取出时间转换JSON后的出现问题
2024-01-18 12:52:13
深入解析MySQL索引的原理与优化策略
2024-01-19 02:29:02
Ubuntu与windows双系统下共用MySQL数据库的方法
2024-01-24 23:38:42
MySQL跨服务器关联查询的实现
2024-01-22 06:52:03
pyramid配置session的方法教程
2021-04-26 09:23:37
Python读写压缩文件的方法
2023-06-02 19:37:53
python爬虫爬取指定内容的解决方法
2022-11-07 11:32:12
vue3动态路由刷新后空白或者404问题的解决
2023-07-02 16:58:39
python聚类算法解决方案（rest接口/mpp数据库/json数据/下载图片及数据）
2024-01-13 15:19:57
Docker + Nodejs + Kafka + Redis + MySQL搭建简单秒杀环境
2024-01-21 23:22:38
Python程序员面试题 你必须提前准备!
2023-09-12 09:52:44
PyQt5 designer 页面点击按钮跳转页面实现
2023-02-24 14:12:48
Numpy 多维数据数组的实现
2022-12-22 11:26:03
python中几种自动微分库解析
2022-12-20 18:24:02