Question

正如标题所说，我需要捕获选项卡的更改事件并向用户显示确认消息框。我实现了这个，但使用确认 JS本机函数。我想使用ExtJS的 Ext.Msg.show（）执行此操作，但程序流程不会以这种方式停止，就像使用确认功能一样。请参阅以下两种方式：

'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听众返回 以编程方式更改标签。

示例代码：此处我使用allowChange作为标记，以防止在以编程方式更改选项卡时显示消息框。你可以在这里使用你自己的旗帜，我想这是AppGlobals.isEditing

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: