ExtJs事件機制基本代碼模型和流程解析

更新時間：2010年10月24日 17:08:21 作者：

最近開始自學ExtJs，下載了些視頻和上網(wǎng)搜了些相關(guān)文章和文檔準備好好學學，今晚第一次接觸ExtJs的事件機制，剛開始感覺有點暈，和以前所接觸的VB或是純的JAVASCRIPT的實現(xiàn)方式有些區(qū)別。根據(jù)一個例子，來分析和總結(jié)一下這個流程吧。

代碼實現(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ā)事件的最直觀入口。當方法執(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)置方法，當觸發(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

您可能感興趣的文章: