Stop program flow with Ext.Msg Extjs 4.1.1

Question

As the title says, I need to capture the change event of a tab and show to the user a confirm message box. I achieved this but using the confirm JS native function. I'd like to perform this using ExtJS's Ext.Msg.show(), but the program flow does not stop with this way, as it does with confirm function. See below the two ways:

'Ext.Msg.show()' way:

onBeforeTabChange: function(panel, nextTab, oldTab) 
    {
        var bReturn = true;
        if (null != oldTab)  
        { 
            if(AppGlobals.isEditing=='si')
            {
                Ext.Msg.show(
                {
                    title: 'Warning', 
                    msg: 'Leave without saving changes?',
                    buttons: Ext.Msg.YESNO,
                    icon: Ext.Msg.WARNING,
                    closable: false,
                    buttonText: 
                    {
                        yes : 'Yes, sure',
                        no : 'No, will save changes first'                
                    },
                    fn: function (buttonId)
                    {
                        if(buttonId=="yes")
                        {
                            AppGlobals.isEditing = 'no';
                            bReturn = true;
                        }
                        else
                        {
                            bReturn = false;
                        }
                    }
                });
            }
            else
            {
                bReturn = true;
            }
        }
        return bReturn;
    }

As I said before, the code above does not stop the program flow. The alert appears but the tab changes anyway.

'confirm' way:

onBeforeTabChange: function(panel, nextTab, oldTab) 
    {
        var bReturn = true;
        if (null != oldTab)  
        { 
            if(AppGlobals.isEditing=='si')
            {
                bReturn = confirm('Leave without saving changes?');
                if(bReturn==true)
                {
                    AppGlobals.isEditing = 'no';
                }
            }
            else
            {
                bReturn = true;
            }
        }
        return bReturn;
    }

The code above do work, and the tab does not change until user clicks on "Yes".

Any help? Thanks in advance.

Answer 1

Ext.Msg.show() is asynchronous and doesn't stop execution of the rest of program. The solution would be always return false from beforetabchange listener and programmatically change the tab when user press Yes.

A Sample Code: Here i have used allowChange as flag to prevent showing of message box when tab is changed programmatically. You can use you own flag here which i suppose is AppGlobals.isEditing

Ext.application({
  launch: function() {
    var allowChange = false;
    Ext.create('Ext.tab.Panel', {
      width: 300,
      height: 200,
      activeTab: 0,
      items: [{
          title: 'Tab 1',
          bodyPadding: 10,
          html: 'A simple tab'
        },
        {
          title: 'Tab 2',
          html: 'Another one'
        }
      ],
      renderTo: Ext.getBody(),
      listeners: {
        beforetabchange: function(tabPanel, nextTab, oldTab) {
          var bReturn = true;
          if (null != oldTab && !allowChange) {
            bReturn = false;
            Ext.Msg.show({
              title: 'Warning',
              msg: 'Leave without saving changes?',
              buttons: Ext.Msg.YESNO,
              icon: Ext.Msg.WARNING,
              closable: false,
              buttonText: {
                yes: 'Yes, sure',
                no: 'No, will save changes first'
              },
              fn: function(buttonId) {
                if (buttonId == "yes") {
                  allowChange = true;    // to stop showing the message box again when tab is changed programmaticaly
                  tabPanel.setActiveTab(nextTab);

                }

              }
            });

          }
          allowChange = false;
          return bReturn; // always return false
        }
      }
    });
  }
});

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>