使用 Ext.Msg Extjs 4.1.1 停止程序流

Question

正如标题所说，我需要捕获选项卡的更改事件并向用户显示确认消息框。我实现了这一点，但使用 confirm JS 原生函数。我想使用 ExtJS 的 Ext.Msg.show() 来执行此操作，但程序流程并不会像 confirm 函数那样停止。看下面两种方式：

'Ext.Msg.show()'方式：

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;
    }

正如我之前所说，上面的代码不会停止程序流程。出现警报，但选项卡仍然发生变化。

'确认'方式：

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;
    }

上面的代码确实有效，并且标签在用户点击“是”之前不会改变。

有什么帮助吗？提前致谢。

Answer 1

Ext.Msg.show() 是异步，不会停止程序其余部分的执行。解决方案是从beforetabchange 侦听器始终返回 false，并在用户按下 Yes 时以编程方式更改选项卡。

示例代码：这里我使用allowChange 作为标志，以防止在以编程方式更改选项卡时显示消息框。你可以在这里使用你自己的标志，我想是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>