代碼實現(xiàn)的目的：為一個自定義的類的某個屬性在使用它時候，觸發(fā)某個事件。
該程序的效果：點擊輸入按鈕，彈出一個腳本提示輸入框讓用戶輸入他的姓名，確定后，用戶錄入的姓名會顯示在頁面的姓名文本框中，并且頁面標題變成和姓名一致，接著再彈出腳本提示輸入框讓用戶輸入性別，錄入完畢并點擊確定后，用戶錄入的性別將會顯示在頁面的性別文本框里。
<!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 ;
//按鈕點擊后觸發(fā)
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() ;
//為對象實現(xiàn)事件處理方法
//JS里進行激發(fā)，這里進行事件觸發(fā)后的處理
_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){
//為對象設(shè)置新的name
this.name = _name ;
//激發(fā)起名字為namechange的事件，后面是傳的三個參數(shù)
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;
}
}) ;
由以上具有代表性的代碼中可以總結(jié)出，一個類要想綁定event事件，最基本和常見的程序設(shè)計流程是這樣的：
1、需要在聲明對象時候使用如下方法進行聲明要綁定的事件名稱；
this.addEvents(
"namechange",
"sexchange"
2、將自定義的類繼承于Ext.util.Observable，并且實現(xiàn)想要觸發(fā)1中定義的事件名的屬性(或者說是方法)；
setName:function(_name){
if(this.name != _name){
//為對象設(shè)置新的name
this.name = _name ;
//激發(fā)起名字為namechange的事件，后面是傳的三個參數(shù)
this.fireEvent("namechange" , this , this.name , _name) ;
}
},
注意這里的：this.fireEvent("namechange" , this , this.name , _name) ; 是觸發(fā)事件的最直觀入口。當(dāng)方法執(zhí)行到這里時候，將會激發(fā)名字為namechange的事件。
3 實現(xiàn)事件觸發(fā)后的處理邏輯。
_person.on("namechange" , function(_person , _old , _new){
txt_name.dom.value = _new ;
alert(_person.getName());
}) ;
這里的on是Extjs內(nèi)置方法，當(dāng)觸發(fā)了名字為namechange的事件時候，將會執(zhí)行function函數(shù)，而這里的function的參數(shù)，則是由JS里的this.fireEvent("namechange" , this , this.name , _name) ; 后面三個參數(shù)傳來的。
好，一個EXTJS最簡單經(jīng)典的事件觸發(fā)機制程序代碼設(shè)計流程就是這樣的，而代碼執(zhí)行的流程，則是一個逆推的過程了。歡迎與廣大EXTJS愛好者進行交流，我的QQ：1213145055。
本文章作者：王崇安，博客地址：http://www.cnblogs.com/wangchongan
