1. #1
    Ext User
    Join Date
    May 2008
    Posts
    26
    Vote Rating
    0
    mramadoss is on a distinguished road

      0  

    Default How to stop TabPanel's CLOSE event.

    How to stop TabPanel's CLOSE event.


    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

  2. #2
    Ext User
    Join Date
    May 2008
    Posts
    26
    Vote Rating
    0
    mramadoss is on a distinguished road

      0  

    Default


    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.

    Code:
       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;
            }
          }
        });

  3. #3
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
    gslender is on a distinguished road

      0  

    Default


    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

  4. #4
    Ext User
    Join Date
    May 2008
    Posts
    26
    Vote Rating
    0
    mramadoss is on a distinguished road

      0  

    Default


    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.

  5. #5
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
    gslender is on a distinguished road

      0  

    Default


    just to confirm, this code doesn't work? it should just stop the close from happening...
    Code:
     tabPanel.addListener(Events.BeforeRemove, new Listener<TabPanelEvent>() {
          public void handleEvent(TabPanelEvent tpe) {
                tpe.doit=false;
          }
      });

  6. #6
    Ext User
    Join Date
    May 2008
    Posts
    26
    Vote Rating
    0
    mramadoss is on a distinguished road

      0  

    Default


    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

    Code:
        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;
                }
          }
      });

  7. #7
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
    gslender is on a distinguished road

      0  

    Default


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

  8. #8
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    4
    gslender is on a distinguished road

      0  

    Default


    ...also, I note you are using the text of the yes button to determine which button was pressed
    Code:
    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 ....

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

  9. #9
    Ext User
    Join Date
    Jun 2009
    Posts
    15
    Vote Rating
    0
    oshannon is on a distinguished road

      0  

    Default easy way to prevent tab from closing

    easy way to prevent tab from closing


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

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

  10. #10
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    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)
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041