extjs 為某個(gè)事件設(shè)置攔截器
更新時(shí)間：2010年01月15日 16:32:04 作者：
Ext.util.Observable有一個(gè)重要的功能，可以為某個(gè)事件設(shè)置攔截器，統(tǒng)一管理方法的處罰。使用capture()和releaseCapture()來(lái)實(shí)現(xiàn)這個(gè)功能。
我們先來(lái)自定義一個(gè)事件：
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 + '在走啊走啊。');
});
然后我們?cè)俣x一個(gè)按鈕用來(lái)觸發(fā)這個(gè)walk事件：
var btn = new Ext.Button({
id: 'walk',
text: '觸發(fā)事件按鈕',
renderTo: Ext.getBody()
});
btn.on('click', function() {
person.fireEvent('walk');
});
當(dāng)點(diǎn)擊按鈕時(shí)觸發(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;
});
});
這時(shí)單擊btn2按鈕，發(fā)現(xiàn)彈出對(duì)話框后還會(huì)觸發(fā)事件，郁悶。。?！，F(xiàn)在將最后一行代碼改為return false試試？事件被攔截成功了吧！
這樣就給我們一個(gè)選擇的機(jī)會(huì)，通過(guò)控制capture（）中處理函數(shù)的返回值來(lái)決定是否繼續(xù)執(zhí)行某個(gè)時(shí)間的監(jiān)聽函數(shù)，還是直接中止該事件的發(fā)生。
我們還可以為一個(gè)對(duì)象設(shè)置多個(gè)capture()攔截函數(shù)，這些攔截函數(shù)會(huì)形成一個(gè)處理鏈條，只要其中任何一個(gè)攔截函數(shù)返回false，就會(huì)中止處理過(guò)程。
releaseCapture()函數(shù)是capture（）函數(shù)的反向操作，它會(huì)一次性清除fireEvent()上所有的攔截函數(shù)，不過(guò)我們無(wú)法通過(guò)它準(zhǔn)確的刪除某一個(gè)攔截函數(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 + '在走啊走啊。');
});
然后我們?cè)俣x一個(gè)按鈕用來(lái)觸發(fā)這個(gè)walk事件：
復(fù)制代碼 代碼如下:
var btn = new Ext.Button({
id: 'walk',
text: '觸發(fā)事件按鈕',
renderTo: Ext.getBody()
});
btn.on('click', function() {
person.fireEvent('walk');
});
當(dāng)點(diǎn)擊按鈕時(shí)觸發(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;
});
});
這時(shí)單擊btn2按鈕，發(fā)現(xiàn)彈出對(duì)話框后還會(huì)觸發(fā)事件，郁悶。。?！，F(xiàn)在將最后一行代碼改為return false試試？事件被攔截成功了吧！
這樣就給我們一個(gè)選擇的機(jī)會(huì)，通過(guò)控制capture（）中處理函數(shù)的返回值來(lái)決定是否繼續(xù)執(zhí)行某個(gè)時(shí)間的監(jiān)聽函數(shù)，還是直接中止該事件的發(fā)生。
我們還可以為一個(gè)對(duì)象設(shè)置多個(gè)capture()攔截函數(shù)，這些攔截函數(shù)會(huì)形成一個(gè)處理鏈條，只要其中任何一個(gè)攔截函數(shù)返回false，就會(huì)中止處理過(guò)程。
releaseCapture()函數(shù)是capture（）函數(shù)的反向操作，它會(huì)一次性清除fireEvent()上所有的攔截函數(shù)，不過(guò)我們無(wú)法通過(guò)它準(zhǔn)確的刪除某一個(gè)攔截函數(shù)。一旦執(zhí)行了releaseCapture(),那么之前設(shè)置的所有攔截函數(shù)就都失效了。
相關(guān)文章
extjs中g(shù)rid中嵌入動(dòng)態(tài)combobox的應(yīng)用
今天需要在grid中嵌入combobox，在網(wǎng)上找了好久也沒有找到一個(gè)正確可行的方法，可能是版本問(wèn)題（我版本是extjs 3.0），沒有繼續(xù)研究其原因，自己查找資料，終于實(shí)現(xiàn)功能?，F(xiàn)在分享一下代碼。2011-01-01
ExtJs是一個(gè)非常好的客戶端JavaScript，他的很多空間都可以自定義而且也可以擴(kuò)展。2010-03-03
最近開始自學(xué)ExtJs，下載了些視頻和上網(wǎng)搜了些相關(guān)文章和文檔準(zhǔn)備好好學(xué)學(xué)，今晚第一次接觸ExtJs的事件機(jī)制，剛開始感覺有點(diǎn)暈，和以前所接觸的VB或是純的JAVASCRIPT的實(shí)現(xiàn)方式有些區(qū)別。根據(jù)一個(gè)例子，來(lái)分析和總結(jié)一下這個(gè)流程吧。2010-10-10
在Ext的使用過(guò)程中，一不留心就出現(xiàn)了亂碼，包括在客戶端提交給服務(wù)器的數(shù)據(jù)中出現(xiàn)了亂碼和服務(wù)器端返回給客戶端的數(shù)據(jù)中出現(xiàn)了亂碼，下面簡(jiǎn)單分析一下出現(xiàn)亂碼的原因。2009-04-04
學(xué)習(xí)ExtJS TextField常用方法
ExtJS TextField常用方法2009-10-10
ExtJs grid行 右鍵菜單的兩種方法，需要用extjs制作右鍵菜單的朋友可以參考下。2010-06-06
Extjs4 Treegrid 使用心得分享(經(jīng)驗(yàn)篇)
最近調(diào)試EXTJS 4的treegrid實(shí)例，看了很多水友的文章，以及官方的demo，沒一個(gè)可靠的，于是乎自己折騰中...感興趣的朋友可以了解下本文或許對(duì)你有所幫助2013-07-07
入門基礎(chǔ)學(xué)習(xí) ExtJS筆記（一）
這段時(shí)間手中項(xiàng)目已經(jīng)完成，空閑時(shí)間較多。開始了學(xué)習(xí)ExtJs之旅。2010-11-11
Ext.util.Observable有一個(gè)重要的功能，可以為某個(gè)事件設(shè)置攔截器，統(tǒng)一管理方法的處罰。使用capture()和releaseCapture()來(lái)實(shí)現(xiàn)這個(gè)功能。2010-01-01
解決ExtJS在chrome或火狐中正常顯示在ie中不顯示的瀏覽器兼容問(wèn)題
由于開發(fā)過(guò)程中大多用chrome來(lái)調(diào)試，很少在ie中調(diào)試（現(xiàn)在兩者都要兼顧），導(dǎo)致最后在ie中頁(yè)面不能正常加載，當(dāng)時(shí)那個(gè)囧啊，看到ie報(bào)的錯(cuò)，我都想哭，連出錯(cuò)的堆棧信息都沒有（這一點(diǎn)，ie做的真不好），無(wú)從下手啊2013-01-01