extjs 為某個事件設(shè)置攔截器
更新時間:2010年01月15日 16:32:04 作者:
Ext.util.Observable有一個重要的功能,可以為某個事件設(shè)置攔截器,統(tǒng)一管理方法的處罰。使用capture()和releaseCapture()來實現(xiàn)這個功能。
我們先來自定義一個事件:
person = function(name) {
this.name = name;
this.addEvents("walk");
}
Ext.extend(person, Ext.util.Observable, {
info: function(event) {
return this.name + 'is' + event + 'ing.';
}
});
var person = new person('張銘諾');
person.on('walk', function() {
Ext.Msg.alert('event', person.name + '在走啊走啊。');
});
然后我們再定義一個按鈕用來觸發(fā)這個walk事件:
var btn = new Ext.Button({
id: 'walk',
text: '觸發(fā)事件按鈕',
renderTo: Ext.getBody()
});
btn.on('click', function() {
person.fireEvent('walk');
});
當(dāng)點擊按鈕時觸發(fā)事件,效果如下圖所示:

現(xiàn)在我們使用capture()函數(shù)攔截事件的觸發(fā),如下面的代碼所示:
var btn2 = new Ext.Button({
id: 'cc',
text: '攔截事件',
renderTo: Ext.getBody()
});
btn2.on('click', function() {
Ext.util.Observable.capture(person, function() {
alert('fsdjhf');
return true;
});
});
這時單擊btn2按鈕,發(fā)現(xiàn)彈出對話框后還會觸發(fā)事件,郁悶。。?!,F(xiàn)在將最后一行代碼改為return false試試?事件被攔截成功了吧!
這樣就給我們一個選擇的機會,通過控制capture()中處理函數(shù)的返回值來決定是否繼續(xù)執(zhí)行某個時間的監(jiān)聽函數(shù),還是直接中止該事件的發(fā)生。
我們還可以為一個對象設(shè)置多個capture()攔截函數(shù),這些攔截函數(shù)會形成一個處理鏈條,只要其中任何一個攔截函數(shù)返回false,就會中止處理過程。
releaseCapture()函數(shù)是capture()函數(shù)的反向操作,它會一次性清除fireEvent()上所有的攔截函數(shù),不過我們無法通過它準確的刪除某一個攔截函數(shù)。一旦執(zhí)行了releaseCapture(),那么之前設(shè)置的所有攔截函數(shù)就都失效了。
復(fù)制代碼 代碼如下:
person = function(name) {
this.name = name;
this.addEvents("walk");
}
Ext.extend(person, Ext.util.Observable, {
info: function(event) {
return this.name + 'is' + event + 'ing.';
}
});
var person = new person('張銘諾');
person.on('walk', function() {
Ext.Msg.alert('event', person.name + '在走啊走啊。');
});
然后我們再定義一個按鈕用來觸發(fā)這個walk事件:
復(fù)制代碼 代碼如下:
var btn = new Ext.Button({
id: 'walk',
text: '觸發(fā)事件按鈕',
renderTo: Ext.getBody()
});
btn.on('click', function() {
person.fireEvent('walk');
});
當(dāng)點擊按鈕時觸發(fā)事件,效果如下圖所示:

現(xiàn)在我們使用capture()函數(shù)攔截事件的觸發(fā),如下面的代碼所示:
復(fù)制代碼 代碼如下:
var btn2 = new Ext.Button({
id: 'cc',
text: '攔截事件',
renderTo: Ext.getBody()
});
btn2.on('click', function() {
Ext.util.Observable.capture(person, function() {
alert('fsdjhf');
return true;
});
});
這時單擊btn2按鈕,發(fā)現(xiàn)彈出對話框后還會觸發(fā)事件,郁悶。。?!,F(xiàn)在將最后一行代碼改為return false試試?事件被攔截成功了吧!
這樣就給我們一個選擇的機會,通過控制capture()中處理函數(shù)的返回值來決定是否繼續(xù)執(zhí)行某個時間的監(jiān)聽函數(shù),還是直接中止該事件的發(fā)生。
我們還可以為一個對象設(shè)置多個capture()攔截函數(shù),這些攔截函數(shù)會形成一個處理鏈條,只要其中任何一個攔截函數(shù)返回false,就會中止處理過程。
releaseCapture()函數(shù)是capture()函數(shù)的反向操作,它會一次性清除fireEvent()上所有的攔截函數(shù),不過我們無法通過它準確的刪除某一個攔截函數(shù)。一旦執(zhí)行了releaseCapture(),那么之前設(shè)置的所有攔截函數(shù)就都失效了。
相關(guān)文章
學(xué)習(xí)ExtJS(一) 之基礎(chǔ)前提
學(xué)習(xí)ExtJS前提條件,大家要想學(xué)習(xí),需要一些基礎(chǔ)知識。2009-10-10extjs 列表框(multiselect)的動態(tài)添加列表項的方法
最近公司一個項目,因為要使用div模擬的窗口,因為久聞extjs的大名,因此就想在項目中使用一下.首先下載了multiselect的extjs3.0 demo.看到的代碼這里我就不粘貼了.2009-07-07ExtJS 學(xué)習(xí)專題(一) 如何應(yīng)用ExtJS(附實例)
相信大家已經(jīng)領(lǐng)略了ExtJs的魅力,那么要如何應(yīng)用ExtJS呢?2010-03-03Extjs學(xué)習(xí)筆記之二 初識Extjs之Form
form恐怕是Web開發(fā)中最常用的控件了,Extjs對普通的html form進行了一些封裝,使其具有基本的外觀和一些簡便的和服務(wù)器進行通信的方法。2010-01-01Extjs 4.x 得到form CheckBox 復(fù)選框的值
CheckBox(復(fù)選框)主要用來接收用戶選擇的選項,那么如何通過Extjs 4.x 得到form CheckBox的值呢?下面有個不錯的方法,大家值得一看2014-05-05extjs 3.31 TreeGrid實現(xiàn)靜態(tài)頁面加載json到TreeGrid里面
extjs 3.31 TreeGrid 我的小改動,實現(xiàn)靜態(tài)頁面加載json到TreeGrid里面2013-04-04