快捷導(dǎo)航

ExtJS TabPanel beforeremove beforeclose使用說(shuō)明

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

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

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

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

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

主要代碼如下

中間區(qū)域部分：

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

 
//centerPanel 
centerPanel = new Ext.TabPanel({ 
id: 'centerPnl' 
, region: 'center' 
, border: false 
, iconCls: 'tabs' 
, enableTabScroll: true 
, items: [{ 
title: '首頁(yè)' 
, autoScroll: true 
}] 
, defaults: { autoScroll: true } 
});增加一個(gè)新的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)閉了；后來(lái)上網(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: '首頁(yè)' 
, autoScroll: true 
}] 
, defaults: { autoScroll: true } 
//首先監(jiān)聽beforeremove事件 
, listeners: { beforeremove: function(ct,component ) { return false; } } 
}); 

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

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

您可能感興趣的文章: