與Ext.Msg的ExtJS 4.1.1

停止程序流程正如標題所說，我需要捕獲標籤的變化情況，並顯示給用戶的確認消息框。我實現了這個，但使用的確認 JS原生功能。我想執行此使用的ExtJS的Ext.Msg.show（），但程序流程不這樣停止，因爲它與確認功能一樣。看到兩個途徑如下：與Ext.Msg的ExtJS 4.1.1

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

上面的代碼做的工作，以及標籤不改變，直到「是」用戶點擊。

任何幫助？提前致謝。

來源

2017-06-21 mauroave

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>

來源

2017-06-22 08:38:31

偉大的！正是我需要的 – mauroave

與Ext.Msg的ExtJS 4.1.1

回答

相關問題