Sencha Touch Swap Panels

Question

I just started using sencha touch recently and so far I've got this built:
app.js:

Ext.regApplication({
    name: 'app',
    launch: function() {
        this.launched = true;
        this.mainLaunch();
    },
    mainLaunch: function() {
        if (!device || !this.launched) {return;}
        this.views.viewport = new this.views.Viewport();
    }
});

Viewport.js:

app = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    sortable: false,
    tabBar: {
        dock: 'bottom',
        layout: {pack: 'center'}
    },
    cardSwitchAnimation: {
        type: 'slide',
        cover: true
    },
    initComponent: function() {
        Ext.apply(app.views, {
            searchListTab: new app.views.SearchListTab(),
            searchTab: new app.views.SearchTab(),
            mapTab: new app.views.MapTab(),
            infoTab: new app.views.InfoTab()
        });
        Ext.apply(this, {
            items: [
                app.views.searchTab,
                app.views.mapTab,
                app.views.infoTab
            ]
        });
        app.views.Viewport.superclass.initComponent.apply(this, arguments);
    }

});

SearchTab.js

app.views.SearchTab = Ext.extend(Ext.Panel, {
    title: 'Search',
    iconCls: 'search',
    dockedItems: [{
        xtype: 'toolbar',
        title: 'Search'
    }],
    items: [
        {
            xtype: 'button',
            ui: 'round',
            text: 'Hledej',
            listeners: {
                tap: function() {
                    Ext.dispatch({
                        controller: app.controllers.main,
                        action: 'search',
                        animation: {type:'slide', direction:'right'}
                    });
                }
            }
        }
    ],
    initComponent: function() {
        app.views.SearchTab.superclass.initComponent.apply(this, arguments);
    }
});

SearchListTab.js

app.views.SearchListTab = Ext.extend(Ext.Panel, {
    title: 'Search',
    iconCls: 'search',
    dockedItems: [{
        xtype: 'toolbar',
        title: 'Search Results'
    }],
    items: [{
        xtype: 'list',
        store: app.stores.results,
        itemTpl: '{titul}',
        grouped: false
        //onItemDisclosure: function (record) {
            //Ext.dispatch({
            //    controller: app.controllers.contacts,
            //    action: 'show',
            //    id: record.getId()
            //});
        //}
    }],
    initComponent: function() {
        app.stores.results.load();
        app.views.SearchListTab.superclass.initComponent.apply(this, arguments);
    }
});

and search.js

app.controllers.main = new Ext.Controller({

    search: function(options) {
        app.views.searchTab.setActiveItem(
            app.views.searchListTab, options.animation
        );
    }

});

and some other stuff which is not important now. So basically I've got a main viewport which is a tabpanel, then few panels which are its items and one panel which is nowhere from the beginning. Now I want to achieve, that when I click the button in searchTab I want the searchTab panel to swap with searchListTab panel. The problem is, when I use app.views.viewport.setActiveItem(...); it works fine, but it adds a new tab to the tab panel. I just want the current tab panel to slide to another panel, but when I use the code I posted here - app.views.searchTab.setActiveItem(...); it doesn't do anything.
What am I doing wrong? Thanks.

Answer 1

I think you will have to introduce another layer of nesting to achieve this.

I think you want to nest your SearchTab in another Ext.Panel with a card layout and add your SearchListTab to this panel when needed and then you can use the setActiveItem() method to slide across. This will keep your TabPanel visible while moving between sub-views within a tab.

I've drawn a wee diagram to try and explain it better! The black box is the new Panel I think you should add which will replace the SearchTab as the item directly added to the TabPanel.

Hope this helps and is clear!