View Full Version : BorderLayout - overload Tab Close Event

30 Oct 2006, 7:51 AM
Could anyone provide me with an example on how to overload the tab close event in the BorderLayout. What I'm trying to do is when a tab is to be closed a dialog is displayed asking if you'd like to save any unsaved data. If they click yes it would cancel the close tab if no is select it would continue to close the tab... Thanks for any help.

30 Oct 2006, 7:56 AM
closeClick:function(e){if (confirm('Are you sure you want to close the tab?')) { this.tabPanel.removeTab(this.id);this.fireEvent('close',this); }},closeText:'Close this tab'};

replace former closeClick function with this one

30 Oct 2006, 12:24 PM
To expand on what KuN said:

Replace 'west' with your region.

...// add panel
var tab = layout.getRegion('west').tabs.getTab(/* panel id */);
tab.closeClick = function(){
if(confirm('Save blah blah?)){

This would be useful to make more generic. I will look at adding the functionality as part of the normal flow.

2 Apr 2007, 3:04 AM
Is the above example still the best way to accomplish a close confirm on a tab?

2 Apr 2007, 6:55 AM
You can just add a handler to the 'beforeclose' event of the TabPanelItem and in the handler just set the event's cancel flag to true

function checkClose(tab, e) {
if (confirm close....) {
e.cancel = true;

5 Sep 2007, 1:12 PM
I've attempted to follow the information in this thread but am still having difficulty.

my code:

var tabcount = layout.getRegion('center').tabs.getTabs().getCount();
for (var i=0;i<tabcount;i++){
var tab = layout.getRegion('center').getTabs().getTab(i);
tab.on('beforeclose', function(tab,e){
e.cancel = true;
When the tab's close button is clicked Ext.TabPanel.closeClick function is executed, but the tab closes before the "o.cancel !== true" is evaluated. Instead the beforeclose fireEvent eventually ends up at Ext.LayoutRegion.initPanelAsTab and the tab is closed there before my o.cancel is evaluated.

/** @private */
closeClick : function(e){
var o = {};
this.fireEvent("beforeclose", this, o);
if(o.cancel !== true){
Hmm, any suggestions? I'm using version 1.1.1.


2 Oct 2007, 4:46 PM

Your post is about a month old now and maybe you already figured this out, but I came across the same problem and a search brought up your post. By the time the "beforeclose" event fires on the tab, it is actually already closed. (Perhaps a bug in Ext 1.1.1? Or at least a documentation problem.)

Anyway, I resolved it by using the "beforeremove" event on the region instead. So just:

layout.getRegion('center').on('beforeremove', this.myBeforeRemoveHandler, this);

and that worked.