与Ext.Msg的ExtJS 4.1.1

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()是异步并不停止执行其余的程序。解决方案将是总是返回false从beforetabchange听众和编程方式更改该标签时，用户按是。

范例代码：这里我使用了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>