阻止Ext.tab.Panel上的選項卡更改？

Question

我有一個選項卡，用戶必須輸入信息，並且我想在用戶嘗試更改選項卡時驗證數據。如果數據輸入不完整，我會提示用戶驗證他想離開。

我在標籤面板上添加了聽衆activeitemchange：，我可以提示用戶。但是，看起來Ext.Msg並沒有阻止方法調用，而且我總是從activeitemchange中「返回true」。

如何更改代碼，以便僅在用戶單擊「是」時更改選項卡？

Ext.Loader.setConfig({enabled: true}); 

Ext.application({ 
    name: "Sencha", 

    launch: function() { 

     var tabPanel = Ext.create('Ext.tab.Panel', { 
      layout: 'card', 
      tabBarPosition: 'bottom', 
      listeners: { 

       activeitemchange: function (me, value, oldValue, eOpts) { 
        console.log("activeitemchange"); 

        var oldTabIdx = me.getInnerItems().indexOf(oldValue); 
        var newTabIdx = me.getInnerItems().indexOf(me.getActiveItem()); 

        console.log(oldTabIdx + " => " + newTabIdx); 
        if (oldTabIdx == 2) { 
//     me.getTabBar().setActiveItem(2); 
         Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) { 
          console.log(response); 
          if (response === 'no') { 
           console.log("User says stay."); 
           return false; 
          } else { 
           console.log("User says leave."); 
           return true; 
          } 
         }); 
        } 
        // Always returns true because Ext.Msg.confirm doesn't block 
        return true; // false prevents tab change 
       } 
      }, 
      items: [ 
       { 
        id: 'tab1', 
        title: 'Home', 
        layout: 'fit', 
        xtype: 'container', 
        iconCls: 'home', 
        items: [ 
         {html: 'page #1'} 
        ] 
       }, 
       { 
        id: 'tab2', 
        title: 'Two', 
        layout: 'fit', 
        xtype: 'container', 
        iconCls: 'star', 
        items: [ 
         {html: 'page #2'} 
        ] 
       }, 
       { 
        id: 'tab3', 
        title: 'three', 
        layout: 'fit', 
        xtype: 'container', 
        iconCls: 'team', 
        items: [ 
         {html: 'page #3'} 
        ] 
       } 
      ] 
     }); 
     Ext.Viewport.add(tabPanel); 
    } 
}); 

試圖修復：

Ext.Loader.setConfig({enabled: true}); 

Ext.application({ 
    name: "Sencha", 

    launch: function() { 

     var tabPanel = Ext.create('Ext.tab.Panel', { 
      layout: 'card', 
      tabBarPosition: 'bottom', 
      confirm: true, 

      listeners: { 

       activeitemchange: { 
        order: 'before', 

        fn: function (list, value, oldValue, eOpts) { 
         var me = this; 

         console.log(me.getConfirm()); // ERROR: getConfirm() is undefined 

         var oldTabIdx = me.getInnerItems().indexOf(oldValue); 
         var newTabIdx = me.getInnerItems().indexOf(value); 

         console.log(oldTabIdx + " => " + newTabIdx); 

         if (oldTabIdx == 2 && me.getConfirm()) { 
          Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) { 
           console.log(response); 
           if (response === 'no') { 
            console.log("User says stay."); 
           } else { 
            console.log("User says leave."); 
            me.setConfirm(false); 
            me.setActiveItem(newTabIdx); 
           } 
          }); 
          return false; 
         } else { 
          me.setConfirm(true); 
         } 
        } 

       } 
      }, 

      items: [ 
       { 
        id: 'tab1', 
        title: 'Home', 
        layout: 'fit', 
        xtype: 'container', 
        iconCls: 'home', 
        items: [ 
         {html: 'page #1'} 
        ] 
       }, 
       { 
        id: 'tab2', 
        title: 'Two', 
        layout: 'fit', 
        xtype: 'container', 
        iconCls: 'star', 
        items: [ 
         {html: 'page #2'} 
        ] 
       }, 
       { 
        id: 'tab3', 
        title: 'three', 
        layout: 'fit', 
        xtype: 'container', 
        iconCls: 'team', 
        items: [ 
         {html: 'page #3'} 
        ] 
       } 
      ] 
     }); 
     Ext.Viewport.add(tabPanel); 
    } 
}); 

Answer 1

問題是因爲Ext.Msg.confirm（）是一個異步方法。它打開一個不同的線程，以便監聽器繼續其正常執行，而不管子線程上發生了什麼。

我看到的唯一方法是在'yes'回調中觸發setActiveItem（）。

的方法，另外，爲了避免確認環路我添加了一個標誌：

Ext.application({ 
    name: "Sencha", 

    requires: [ 
     'Sencha.MyPanel', 
     'Ext.MessageBox' 
    ], 

    launch: function() { 
     var tabPanel = Ext.create('Sencha.MyPanel'); 
     Ext.Viewport.add(tabPanel); 
    } 
}); 

Ext.define('Sencha.MyPanel', { 
    extend: 'Ext.tab.Panel', 

    config: { 
     layout: 'card', 
     tabBarPosition: 'bottom', 
     confirm: true, 

     listeners: { 
      activeitemchange: { 
       order: 'before', 

       fn: function (list, value, oldValue, eOpts) { 
        var me = this; 

        console.log(me.getConfirm()); // ERROR: getConfirm() is undefined 

        var oldTabIdx = me.getInnerItems().indexOf(oldValue); 
        var newTabIdx = me.getInnerItems().indexOf(value); 

        console.log(oldTabIdx + " => " + newTabIdx); 

        if (oldTabIdx == 2 && me.getConfirm()) { 
         Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) { 
          console.log(response); 
          if (response === 'no') { 
           console.log("User says stay."); 
          } else { 
           console.log("User says leave."); 
           me.setConfirm(false); 
           me.setActiveItem(newTabIdx); 
          } 
         }); 
         return false; 
        } else { 
         me.setConfirm(true); 
        } 
       } 
      } 
     }, 

     items: [ 
      { 
       id: 'tab1', 
       title: 'Home', 
       layout: 'fit', 
       xtype: 'container', 
       iconCls: 'home', 
       items: [ 
        {html: 'page #1'} 
       ] 
      }, { 
       id: 'tab2', 
       title: 'Two', 
       layout: 'fit', 
       xtype: 'container', 
       iconCls: 'star', 
       items: [ 
       {html: 'page #2'} 
       ] 
      }, { 
       id: 'tab3', 
       title: 'three', 
       layout: 'fit', 
       xtype: 'container', 
       iconCls: 'team', 
       items: [ 
        {html: 'page #3'} 
       ] 
      } 
     ] 
    } 
}); 

希望它helps-