Is it possible to navigate from TapPanel in Sencha Touch?

Question

I am using the Sencha Touch TapPanel and want to navigate down on a view from a view.

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

If the user is on the OfferDetailView, I want to have a button and if the user clicks on the button, it should navigate to a view foo and display it with an back button to get back to the tabpanel. Is there any Sencha Touch functionality or frameworks, which is supporting this issue?

I can set the activeItem to a view with

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

but there is no back button. So I have to add it manually and manage all the views on a stack.

Answer 1

You should create an Ext.navigation.View that contains the Ext.tab.Panel as the only object. Then you can push() your new view onto that view and it will work as you're hoping.

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