Sencha Touch 2：如何覆蓋導航視圖上的返回按鈕

Question

我想知道如何在導航視圖中瀏覽後退按鈕。我嘗試使用onBackButtonTap但它似乎沒有工作http://www.senchafiddle.com/#8zaXf

var view = Ext.Viewport.add({ 
      xtype: 'navigationview', 
      onBackButtonTap: function() { 
       alert('Back Button Pressed'); 
      }, 

      //we only give it one item by default, which will be the only item in the 'stack' when it loads 
      items: [ 
       { 
        //items can have titles 
        title: 'Navigation View', 
        padding: 10, 

        //inside this first item we are going to add a button 
        items: [ 
        { 
        xtype: 'button', 
        text: 'Push another view!', 
        handler: function() { 
        //when someone taps this button, it will push another view into stack 
        view.push({ 
        //this one also has a title 
        title: 'Second View', 
        padding: 10, 

        //once again, this view has one button 
        items: [ 
        { 
        xtype: 'button', 
        text: 'Pop this view!', 
        handler: function() { 
        //and when you press this button, it will pop the current view (this) out of the stack 
        view.pop(); 
       } 
       } 
      ] 
     }); 

Answer 1

，你已經在我的本地項目中提到的作品以及我的機器上搗鼓。出於某種原因，它不能在小提琴現場工作。嘗試在本地項目上運行它。

仍然不使用onBackButtonTap配置，最好擴展Ext.navigation.View類並覆蓋onBackButtonTap方法。這樣你就可以更好地控制整個組件。你也想重寫其他配置。這是我想要的使用 -

Ext.namespace('Ext.ux.so'); 

Ext.define('Ext.ux.so.CustomNav',{ 
    extend:'Ext.navigation.View', 
    xtype:'customnav', 
    config:{ 

    }, 
    onBackButtonTap:function(){ 
     this.callParent(arguments); 
     alert('back button pressed'); 
    } 
}); 

行this.callParent(arguments)將使組件在默認方式+來想它的行爲方式行事。如果你想完全覆蓋後退按鈕的行爲，你可以刪除這一行。嘗試兩種方式。

要使用此自定義組件，你可以使用 -

launch: function() { 
     // Destroy the #appLoadingIndicator element 
     Ext.fly('appLoadingIndicator').destroy(); 


     var view = Ext.create('Ext.ux.so.CustomNav', { 
      fullscreen: true, 

      items: [{ 
       title: 'First', 
       items: [{ 
        xtype: 'button', 
        text: 'Push a new view!', 
        handler: function() { 
         //use the push() method to push another view. It works much like 
         //add() or setActiveItem(). it accepts a view instance, or you can give it 
         //a view config. 
         view.push({ 
          title: 'Second', 
          html: 'Second view!' 
         }); 
        } 
       }] 
      }] 
     }); 

    } 

給這個一杆。它會爲你工作yoo。