快捷導(dǎo)航

ExtJS TabPanel beforeremove beforeclose使用說明

更新時間：2010年03月31日 20:20:16 作者：

ExtJS 關(guān)閉TabPanel內(nèi)的Panel時使用TabPanel的'beforeremove’和其內(nèi)的Panel的'beforeclose’事件彈出關(guān)閉確認(rèn)提示對話框

當(dāng)前系統(tǒng)使用Extjs做為前端框架，系統(tǒng)首頁布局采用border方式，左邊手風(fēng)琴式的菜單欄，中間區(qū)域?yàn)門abPanel容器，點(diǎn)擊左邊菜單欄內(nèi)的對應(yīng)菜單在中間區(qū)域添加對應(yīng)的Panel，Panel嵌入添加的gridview；

當(dāng)前問題是，想在用戶關(guān)閉時彈出對話框提示用戶，根據(jù)用戶選擇是否銷毀當(dāng)前頁面(Panel)，或是隱藏當(dāng)前Panel，保存臨時數(shù)據(jù)；

查看Extjs API文檔，對添加的panel監(jiān)聽beforeclose事件

主要代碼如下

中間區(qū)域部分：

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

 
//centerPanel 
centerPanel = new Ext.TabPanel({ 
id: 'centerPnl' 
, region: 'center' 
, border: false 
, iconCls: 'tabs' 
, enableTabScroll: true 
, items: [{ 
title: '首頁' 
, autoScroll: true 
}] 
, defaults: { autoScroll: true } 
});增加一個新的Panelfunction addCMUAMS_LogTab() { 
activeCMUAMS_LogTab = centerPanel.add({ 
id: 'CMUAMS_LogShowAll' 
, title: '系統(tǒng)日志' 
, iconCls: 'tabs' 
, closable: true 
, bodyStyle: 'padding:10px' 
, items: CMUAMS_LogGrid 
, listeners: { beforeclose:TabCloseConfirm } 
}) 
activeCMUAMS_LogTab.show(); 
} 

但是這樣的話，情況如下：

Panel在'beforeclose'前已經(jīng)關(guān)閉了；后來上網(wǎng)Google，查閱資料，忽然想到TabePanel作為容器是不是要在其處先進(jìn)行事件攔截？于是修改中間區(qū)域部分代碼如下//centerPanel

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

 
centerPanel = new Ext.TabPanel({ 
id: 'centerPnl' 
, region: 'center' 
, border: false 
, iconCls: 'tabs' 
, enableTabScroll: true 
, items: [{ 
title: '首頁' 
, autoScroll: true 
}] 
, defaults: { autoScroll: true } 
//首先監(jiān)聽beforeremove事件 
, listeners: { beforeremove: function(ct,component ) { return false; } } 
}); 

再運(yùn)行，查看效果：

搞定想必點(diǎn)擊Panel上的關(guān)閉按鈕時，應(yīng)該是首先執(zhí)行的所在TabPanel容器的Remove事件，然后再執(zhí)行Panel自身的Close事件；項(xiàng)目趕時間，沒過多時間深究了，小弟也是對JS和Extjs了解不深，有路過熟知的朋友望告知真實(shí)原因。

您可能感興趣的文章: