快捷導(dǎo)航

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

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

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

代碼實(shí)現(xiàn)的目的：為一個(gè)自定義的類(lèi)的某個(gè)屬性在使用它時(shí)候，觸發(fā)某個(gè)事件。
該程序的效果：點(diǎn)擊輸入按鈕，彈出一個(gè)腳本提示輸入框讓用戶(hù)輸入他的姓名，確定后，用戶(hù)錄入的姓名會(huì)顯示在頁(yè)面的姓名文本框中，并且頁(yè)面標(biāo)題變成和姓名一致，接著再?gòu)棾瞿_本提示輸入框讓用戶(hù)輸入性別，錄入完畢并點(diǎn)擊確定后，用戶(hù)錄入的性別將會(huì)顯示在頁(yè)面的性別文本框里。

復(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 ; 
//按鈕點(diǎn)擊后觸發(fā) 
button_click = function(){ 
_person.setName(prompt("請(qǐng)輸入姓名:" , "")) ; 
_person.setSex(prompt("請(qǐng)輸入性別:" , "")) ; 
} 

//頁(yè)面加載完進(jìn)行的處理 
Ext.onReady(function(){ 
//獲取控件對(duì)象 
var txt_name = Ext.get("txt_name") ; 
var txt_sex = Ext.get("txt_sex") ; 
//新建一個(gè)Person對(duì)象 
_person = new Ext.dojochina.Person() ; 
//為對(duì)象實(shí)現(xiàn)事件處理方法 
//JS里進(jìn)行激發(fā)，這里進(jìn)行事件觸發(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> 

復(fù)制代碼代碼如下:

 
Ext.namespace("Ext.dojochina") ; 

//定義一個(gè)類(lèi) 
Ext.dojochina.Person = function(){ 
//為類(lèi)添加事件方法 
this.addEvents( 
"namechange", 
"sexchange" 
) ; 
} ; 

//Person類(lèi)繼承于 Observable 
Ext.extend(Ext.dojochina.Person , Ext.util.Observable , { 
name:"", 
sex:"", 
//屬性 
setName:function(_name){ 

if(this.name != _name){ 
//為對(duì)象設(shè)置新的name 
this.name = _name ; 
//激發(fā)起名字為namechange的事件，后面是傳的三個(gè)參數(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é)出，一個(gè)類(lèi)要想綁定event事件，最基本和常見(jiàn)的程序設(shè)計(jì)流程是這樣的：

1、需要在聲明對(duì)象時(shí)候使用如下方法進(jìn)行聲明要綁定的事件名稱(chēng)；

復(fù)制代碼代碼如下:

 
this.addEvents( 
"namechange", 
"sexchange" 

2、將自定義的類(lèi)繼承于Ext.util.Observable，并且實(shí)現(xiàn)想要觸發(fā)1中定義的事件名的屬性(或者說(shuō)是方法)；

復(fù)制代碼代碼如下:

 
setName:function(_name){ 
if(this.name != _name){ 
//為對(duì)象設(shè)置新的name 
this.name = _name ; 
//激發(fā)起名字為namechange的事件，后面是傳的三個(gè)參數(shù) 
this.fireEvent("namechange" , this , this.name , _name) ; 
} 
}, 

注意這里的：this.fireEvent("namechange" , this , this.name , _name) ; 是觸發(fā)事件的最直觀入口。當(dāng)方法執(zhí)行到這里時(shí)候，將會(huì)激發(fā)名字為namechange的事件。

3 實(shí)現(xiàn)事件觸發(fā)后的處理邏輯。

復(fù)制代碼代碼如下:

 
_person.on("namechange" , function(_person , _old , _new){ 
txt_name.dom.value = _new ; 
alert(_person.getName()); 
}) ; 

這里的on是Extjs內(nèi)置方法，當(dāng)觸發(fā)了名字為namechange的事件時(shí)候，將會(huì)執(zhí)行function函數(shù)，而這里的function的參數(shù)，則是由JS里的this.fireEvent("namechange" , this , this.name , _name) ; 后面三個(gè)參數(shù)傳來(lái)的。
好，一個(gè)EXTJS最簡(jiǎn)單經(jīng)典的事件觸發(fā)機(jī)制程序代碼設(shè)計(jì)流程就是這樣的，而代碼執(zhí)行的流程，則是一個(gè)逆推的過(guò)程了。歡迎與廣大EXTJS愛(ài)好者進(jìn)行交流，我的QQ：1213145055。

本文章作者：王崇安，博客地址：http://www.cnblogs.com/wangchongan

您可能感興趣的文章: