ExtJS TabPanel beforeremove beforeclose使用說明

當前系統使用Extjs做為前端架構，系統首頁布局採用border方式，左邊手風琴式的功能表列，中間地區為TabPanel容器，點擊左邊功能表列內的對應菜單在中間地區添加對應的Panel，Panel嵌入添加的gridview；

當前問題是，想在使用者關閉時彈出對話方塊提示使用者，根據使用者選擇是否銷毀當前頁面(Panel)，或是隱藏當前Panel，儲存臨時資料；

查看Extjs API文檔，對添加的panel監聽beforeclose事件

主要代碼如下

中間地區部分： 複製代碼 代碼如下://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: '系統日誌'
, iconCls: 'tabs'
, closable: true
, bodyStyle: 'padding:10px'
, items: CMUAMS_LogGrid
, listeners: { beforeclose:TabCloseConfirm }
})
activeCMUAMS_LogTab.show();
}

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

Panel在'beforeclose'前已經關閉了；後來上網Google，查閱資料，忽然想到TabePanel作為容器是不是要在其處先進行事件攔截？於是修改中間地區部分代碼如下//centerPanel 複製代碼 代碼如下:centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: '首頁'
, autoScroll: true
}]
, defaults: { autoScroll: true }
//首先監聽beforeremove事件
, listeners: { beforeremove: function(ct,component ) { return false; } }
});

再運行，查看效果：

搞定想必點擊Panel上的關閉按鈕時，應該是首先執行的所在TabPanel容器的Remove事件，然後再執行Panel自身的Close事件；項目趕時間，沒過多時間深究了，小弟也是對JS和Extjs瞭解不深，有路過熟知的朋友望告知真實原因。