如何在sencha touch中添加導航欄中的後退按鈕？

Question

在Innerdata.js中，我有一個a標記，在點按事件後，我將其導航到Group.js。

Gruop.js包含一些html.I嘗試在這裏添加導航欄與後退按鈕。這裏唯一的導航欄是不顯示後退按鈕。現在，這是我跌倒的地方，我無法弄清爲什麼後退按鈕不顯示。

我試圖在Group.js頁面的導航欄中添加Back按鈕，所以當我點擊這個按鈕時，我導航到Inner.js page.so這裏有什麼問題？

Inner.js:

Ext.define('chat.view.Inner', { 
    extend: 'Ext.Panel', 
    xtype:'Inner', 
    config: { 
     items: [ 
      {xtype:'Innerdata'} 
     ] 
    } 
}); 

Innerdata.js:

Ext.define('chat.view.Innerdata',{ 
    extend:'Ext.Panel', 
    xtype:'Innerdata', 
    config: { 
     items: [ 
      { 
       html:'<a class="groupimg"><img src="stylesheets/images/groupchat.png"/></a>', 
       listeners: [ 
       { 
        element: 'element', 
        delegate: 'a.groupimg', 
        event: 'tap', 
        fn: function() { 
         console.log('One!'); 
         Ext.Viewport.setActiveItem(Ext.create('chat.view.Group')); 
        } 
       } 
       ] 
      }, 
     ] 
    } 
}); 

Group.js:

Ext.define('chat.view.Group', { 
    extend: 'Ext.navigation.View', 
    //extend: 'Ext.Panel', 
    xtype:'Group', 

    config:{ 
     items: [ 
       {html:'<div>Hello Hello Hello Hello</div>'} 
        ] 
    }, 
    onBackButtonTap:function(){ 
     this.callParent(arguments); 
    } 

});  

這裏是Group.js頁面的截屏，我試圖重新添加按鈕，藍條。

Answer 1

我相信在您的代碼中存在對Ext.navigation.View的誤用。請不要在你的情況下使用它。

這裏是你如何解決這個問題的一些解釋和說明：

• 如果一個看法，說Group.js，是Ext.navigation.View一個子類，它根據PUSH/POP模式的工作原理。請看這裏的例子：http://docs-origin.sencha.com/touch/2.3.0/#!/api/Ext.navigation.View。這就是爲什麼您應用於Group.js的導航視圖在頂部和第一個屏幕上絕不應該有後退按鈕。

• 因此，在這種情況下沒有理由使用navigationview。您只需使用簡單的Ext.Container即可。因此，請將您的父級Group.js更改爲Ext.Container。之後，在頂部添加一個工具欄，將後退按鈕添加到它並綁定一個處理程序。

Ext.define('chat.view.Group', { 
    //extend: 'Ext.navigation.View', 
    extend: 'Ext.Container', 
    xtype:'Group', 

    config:{ 
    items: [ 
     {xtype: 'toolbar', 
     docked: 'top', 
     items: [ 
      {xtype: 'button', 
      text: 'Back', 
      ui: 'back', 
      handler: function(){Ext.Viewport.setActiveItem(Ext.create('chat.view.Inner'));}} 
     ]} 
     {html:'<div>Hello Hello Hello Hello</div>'} 
    ] 
    }, 

});