欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

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

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