Extjs提供了一套強(qiáng)大的事件處理機(jī)制，專門處理用戶動(dòng)作、監(jiān)控控件狀態(tài)、更新控件視圖信息、與服務(wù)器交互等等。事件由Ext.EventManager對(duì)象管理，與瀏覽器W3C標(biāo)準(zhǔn)事件對(duì)象Event相對(duì)應(yīng)，Ext封裝了一個(gè)Ext.EventObject事件對(duì)象。支持事件處理的類（或?yàn)榻涌冢镋xt.util.Observable,凡事繼承該類的組件或類都支持往對(duì)象中添加時(shí)間處理及響應(yīng)功能。
我們?cè)陧?yè)面上加一個(gè)按鈕
<input type="button" id="btntest" value="測(cè)試事件">
在寫一個(gè)函數(shù)
function eventtest(){
Ext.Msg.alert("提示","觸發(fā)了一個(gè)事件！");
}
下面通過(guò)Ext的事件處理機(jī)制為btntest這個(gè)按鈕添加一個(gè)點(diǎn)擊事件，點(diǎn)擊后調(diào)用eventtest方法。
Ext.onReady(
function(){
Ext.get("btntest").addListener("click",eventtest);
}
);
在Ext組件加載完畢后直接給按鈕添加一個(gè)click事件。Ext.get("btntest").addListener(事件,事件執(zhí)行方法，無(wú)需加括弧);
Ext還支持延遲事件處理緩存等功能，比如下面的代碼：
Ext.get("btntest1").addListener("click",eventtest,this,{delay:2000});
<input type="button" id="btntest1" value="延遲事件">
Ext.get("btntest1").addListener("click",eventtest,this,{delay:2000});這句代碼為按鈕注冊(cè)了一個(gè)click事件，但會(huì)延遲2000毫秒執(zhí)行。
可以為html元素添加事件了，我們還可以控制Ext組件的事件，在看一個(gè)例子。
function eventwindow(){
var win=new Ext.Window({
title:"控制Ext組件的事件",
height:200,
width:300
});
win.on(
"beforedestroy",
function(obj){
Ext.Msg.alert("哈哈","你關(guān)不掉了吧！");
obj.show();
return false;
}
);
win.show();
}
每個(gè)組件都含有beforedestroy事件，Ext會(huì)在銷毀這一組件時(shí)觸發(fā)該事件。 這段代碼會(huì)顯示一個(gè)窗體，并且點(diǎn)擊關(guān)閉按鈕時(shí)會(huì)失效。通過(guò)Window的on方法來(lái)控制.. on(事件,事件執(zhí)行函數(shù)).由于窗口對(duì)象的beforedestroy事件響應(yīng)函數(shù)返回值為false，因此執(zhí)行這段程序，窗體才無(wú)法關(guān)閉。組件的時(shí)間監(jiān)聽(tīng)器也可以直接在構(gòu)造函數(shù)中直接聲明，下面的代碼會(huì)和上面同一效果：
function eventwindow(){
var win=new Ext.Window({
title:"控制Ext組件的事件",
height:200,
width:300,
listeners:{
"beforedestroy":
function(obj){
Ext.Msg.alert("哈哈","你關(guān)不掉了吧！");
obj.show();
return false;
}
}
});
win.show();
}
效果如下：

OK，這就是Ext組件的介紹與使用。各位有什么問(wèn)題可以留言一起討論，有什么不對(duì)的地方請(qǐng)指正。
此文章中用的例子都只是簡(jiǎn)單介紹，后面會(huì)詳細(xì)講解。
文章中案例代碼下載 http://xiazai.jb51.net/200812/yuanma/jb51.net_ExtJsDemo2.rar

最新評(píng)論