最近开始自学ExtJs，下载了些视频和上网搜了些相关文章和文档准备好好学学，今晚第一次接触ExtJs的事件机制，刚开始感觉有点晕，和以前所接触的VB或是纯的JAVASCRIPT的实现方式有些区别。根据一个例子，来分析和总结一下这个流程吧。
代码实现的目的：为一个自定义的类的某个属性在使用它时候，触发某个事件。
该程序的效果：点击输入按钮，弹出一个脚本提示输入框让用户输入他的姓名，确定后，用户录入的姓名会显示在页面的姓名文本框中，并且页面标题变成和姓名一致，接着再弹出脚本提示输入框让用户输入性别，录入完毕并点击确定后，用户录入的性别将会显示在页面的性别文本框里。
事件
姓名:
性别:
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
该程序的效果：点击输入按钮，弹出一个脚本提示输入框让用户输入他的姓名，确定后，用户录入的姓名会显示在页面的姓名文本框中，并且页面标题变成和姓名一致，接着再弹出脚本提示输入框让用户输入性别，录入完毕并点击确定后，用户录入的性别将会显示在页面的性别文本框里。
复制代码 代码如下:
姓名:
性别:
复制代码 代码如下:
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事件机制基本代码模型和流程解析的详细内容，更多请关注0133技术站其它相关文章！
