ExtJs 學習筆記基礎(chǔ)篇 Ext組件的使用

更新時間：2008年12月29日 23:07:18 作者：

昨天剛接觸到Extjs，簡單寫了篇學習筆記，今天繼續(xù)。

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