是否可以在Sencha Touch中從TapPanel導航？

Question

我正在使用Sencha Touch TapPanel並希望從視圖中向下導航。

Ext.create('Ext.TabPanel', { 
    itemId: 'panel', 
    fullscreen: true, 
    defaults: { 
     styleHtmlContent: true 
    }, 
    tabBarPosition: 'bottom', 
    layout: { 
     type: 'card', 
     animation: { 
      type: 'fade' 
     } 
    }, 
    items: [{ 
     title: 'Home', 
     html: 'Home Screen' 
    }, { 
     title: 'Contact', 
     xtype: 'OfferDetailView' 
    }] 
}); 

如果用戶是在OfferDetailView，我想有一個按鈕，如果用戶點擊該按鈕，就應該導航到一個視圖foo並與後退按鈕顯示它得到回一個tabpanel 。有沒有任何Sencha Touch功能或框架支持這個問題？

我可以activeItem設置爲一個視圖與

Ext.Viewport.animateActiveItem(foo, {type: 'slide', direction: 'left'});

但沒有後退按鈕。所以我必須手動添加它並管理堆棧中的所有視圖。

Answer 1

您應創建一個包含Ext.tab.Panel作爲唯一對象的Ext.navigation.View。然後你可以在你的新視圖上看到它，並且它會像你希望的那樣工作。

Ext.create('Ext.navigation.View', { 
    itemId: 'navView', 
    layout: 'fit', 
    items: [ 
     { 
      xtype: 'tabpanel', 
      tabBarPosition: 'bottom', 
      items: [{ 
       title: 'Home', 
       html: 'Home Screen' 
      }, { 
       title: 'Contact', 
       xtype: 'OfferDetailView', 
       items: [ 
        { 
         xtype: 'button', 
         text: 'Go to Foo', 
         handler: function(btn) { 
          btn.up('navigationview').push({ xtype: 'foo' }); 
         } 
        } 
       ] 
      }] 
     } 
    ] 
});