How to stop TabPanel's CLOSE event.

[mramadoss]

I want to cancel the CLOSE event of TabPanel, if the panel contains unsaved data.

The issue is similar to http://extjs.com/forum/archive/index.php/t-5846.html.

On close, if the tab has unsaved data, I show a confirmation dialog. If user wants to Cancel the action, I would like to stop the TabItem from closing.

tabPanel.addListener(Events.BeforeClose, new Listener<TabPanelEvent>() {
public void handleEvent(TabPanelEvent tpe) {
final TabPanelEvent event = tpe;
if (tpe.item.getWidget(0) instanceof TimsUpdatable ) {
TimsUpdatable closingWidget = (TimsUpdatable) tpe.item.getWidget(0);
if ( closingWidget.hasUnsavedData()) {
final TimsMessageBox mBox = new TimsMessageBox(MessageBox.QUESTION, MessageBox.YESNO);
String msg1 = new String("Data not saved. Do you want to exit? ");
mBox.setMessage(msg1);

mBox.addCallback(new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
Dialog dialog = (Dialog) be.component;
String option = dialog.getButtonPressed().getText();
if ( option.equalsIgnoreCase("YES") ) {
mBox.hide();
} else {
// --- Do something to stop closing the tab.
mBox.hide();
tabPanel.addListener(Events.BeforeClose, new Listener<TabPanelEvent>() {
public void handleEvent(TabPanelEvent tpe) {
final TabPanelEvent event = tpe;
if (tpe.item.getWidget(0) instanceof TimsUpdatable ) {
TimsUpdatable closingWidget = (TimsUpdatable) tpe.item.getWidget(0);
if ( closingWidget.hasUnsavedData()) {
final TimsMessageBox mBox = new TimsMessageBox(MessageBox.QUESTION, MessageBox.YESNO);
String msg1 = new String("Data not saved. Do you want to exit? ");
mBox.setMessage(msg1);

mBox.addCallback(new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
Dialog dialog = (Dialog) be.component;
String option = dialog.getButtonPressed().getText();
if ( option.equalsIgnoreCase("YES") ) {
mBox.hide();
} else {
// --- Do something to stop closing the tab.
mBox.hide();
event.cancelBubble();
}
}
});
mBox.show();
}
return;
}
}
});

The listener fires but event.closeBubble() does not stop the Tab from closing.

Any ideas?

Thanks

[mramadoss]

I tried the BeforeRemove and Remove events also, with event.stopEvent() to prevent closing of tabs. But still I'm unable to prevent the tab from closing.

   tabPanel.addListener(Events.BeforeRemove, new Listener<TabPanelEvent>() {
      public void handleEvent(TabPanelEvent tpe) {
        if (tpe.item.getWidget(0) instanceof TimsUpdatable ) {
          final TabPanelEvent eve = tpe;
          TimsUpdatable closingWidget = (TimsUpdatable) tpe.item.getWidget(0);
          if ( closingWidget.hasUnsavedData()) {
            final TimsMessageBox mBox = new TimsMessageBox(MessageBox.QUESTION, MessageBox.YESNO);  
            String msg1 = new String("Data not saved.  Do you want to exit?  ");
            mBox.setMessage(msg1);

            mBox.addCallback(new Listener<ComponentEvent>() {  
              public void handleEvent(ComponentEvent be) {   
                Dialog dialog = (Dialog) be.component;
                String option = dialog.getButtonPressed().getText();  
                if ( option.equalsIgnoreCase("YES") ) {
                  mBox.hide(); 
                } else {
                  // --- Do something to stop closing the tab.
                  eve.stopEvent();
                  mBox.hide();
                }
              }
            });
            mBox.show();
          }
          return;
        }
      }
    });

[gslender]

next time you post code, use the [ code ] tags to make it readable...

try using event.doit = false; as the way to cancel an event

also, this post might help http://extjs.com/forum/showthread.php?t=40327

[mramadoss]

gslender: I used the code tag in my next post. I tried event.doit = false also. Still it does not work.

By the time the dialog box appears on the screen, I can see the tab already removed. Though the dialogbox shows up. doit=false has no effect here.

Thanks for yr reply.

[gslender]

just to confirm, this code doesn't work? it should just stop the close from happening...

 tabPanel.addListener(Events.BeforeRemove, new Listener<TabPanelEvent>() {
      public void handleEvent(TabPanelEvent tpe) {
            tpe.doit=false;
      }
  });

[mramadoss]

it works this way now, when I have tpe.doit = false, as the first statement in the listener. However when I want to close it upon "YES" in the confirm dialogbox, setting tpe.doit = true, does not help. Can I force close it then? How? Thanks

    tabPanel.addListener(Events.BeforeRemove, new Listener<TabPanelEvent>() {
      public void handleEvent(TabPanelEvent tpe) {
            tpe.doit = false;
            if (tpe.item.getWidget(0) instanceof TimsUpdatable ) {
              final TabPanelEvent eve = tpe;
              TimsUpdatable closingWidget = (TimsUpdatable) tpe.item.getWidget(0);
              if ( closingWidget.hasUnsavedData()) {
                final TimsMessageBox mBox = new TimsMessageBox(MessageBox.QUESTION, MessageBox.YESNO);  
                String msg1 = new String("Data not saved.  Do you want to exit?  ");
                mBox.setMessage(msg1);

                mBox.addCallback(new Listener<ComponentEvent>() {  
                  public void handleEvent(ComponentEvent be) {   
                    Dialog dialog = (Dialog) be.component;
                    String option = dialog.getButtonPressed().getText();  
                    if ( option.equalsIgnoreCase("YES") ) {
                      eve.doit = true;
                      mBox.hide(); 
                    } else {
                      // --- Do something to stop closing the tab.
                      eve.doit = false;
                      mBox.hide();
                    }
                  }
                });
                mBox.show();
              }
              return;
            }
      }
  });

[gslender]

as previously posted, read this post http://extjs.com/forum/showthread.php?t=40327

[gslender]

...also, I note you are using the text of the yes button to determine which button was pressed

Dialog dialog = (Dialog) be.component;
String option = dialog.getButtonPressed().getText();  
if ( option.equalsIgnoreCase("YES") ) {

a better non-locale bound way is to do this is ....

if (be.buttonClicked.getItemId().equals(Dialog.YES))

[oshannon]

This is a much simpler way of verifying the user wants to close the tab. The return value will cancel the event.

listeners: {
                beforeclose: function(){return(confirm('Are you sure you want to close this tab?'));}
            }

[Arno.Nyhm]

wrong forum. here is the gxt not extjs category.

but anyhow if you would like to adopt your idea to gxt:

the MessageBox confirm does not stop the process and not wait until you clicked something. so its not possible this way.
http://extjs.com/deploy/gxtdocs/com/...event.Listener)