view - 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并使用后退按钮显示它以返回到选项卡面板。是否有任何支持此问题的 Sencha Touch 功能或框架？

我可以将 activeItem 设置为视图

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

但没有后退按钮。所以我必须手动添加它并管理堆栈上的所有视图。

Answer 1

您应该创建一个Ext.navigation.View包含Ext.tab.Panel作为唯一对象的对象。然后，您可以push()将新视图放在该视图上，它会按您希望的方式工作。

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' });
                        }
                    }
                ]
            }]
        }
    ]
});