TabPanel + Container + Lists navigation

Hello,

I'm having a few issues when trying to navigate between views inside of a TabPanel. I know I could use navigationView for this but since I'm actually fixing someone else's code, this is not really an option.

I have a TabPanel with a few tabs. All of these are extended from Containers. These Containers have a list and docked toolbar as items currently. Whenever you tap an item, it should then navigate to a this new view by animating the current screen to the left. There is a back button here which can then be used to return to the previous view.

Here is a simplified version of what I'm doing:

Code:

Ext.define("CX.view.main", {
    extend: 'Ext.tab.Panel',
    xtype: 'navigationView',
    requires: [
        'Ext.Container',
        'Ext.MessageBox',
        'Ext.Panel',
        'Ext.Toolbar'
    ],


    config: {
        fullscreen: true,


        tabBar: {
            docked: 'bottom',
            layout: {
                pack: 'center',
                align: 'center'
            },
            scrollable: {
                direction: 'horizontal',
                indicators: false
            }
        },


        ui: 'light',


        defaults: {
            scrollable: true
        },


        layout: {
            animation: {
                type: 'slide',
                direction: 'left'
            }
        },


        items: [
            {
                id: 'firstPanel',
                xtype: 'notification',
                scrollable: false,
            },
            {
                id: 'secondPanel',
                itemId: 'morePanel',
                xtype: 'more',
                scrollable: false
            }
        ]
    }
});


Ext.define('CX.view.more', {
    extend: 'Ext.Container',
    alias: 'widget.more',
    requires: ['CX.store.DestinationsStore'],
    config: {
        title: 'More',
        iconCls: 'favorites',
        cls: 'card2',
        layout: 'card',


        items: [
            {
                xtype: 'list',
                id: 'moreList',
                cls: 'x-alllistitems',
                store: 'MoreStore',
                disableSelection: true,
                                infinite: true,
                                variableHeights: true,
                height:'100%',


                dockedItems: {
                    xtype: 'titlebar',
                    docked: 'top',
                    padding: '5px',
                    title: 'Social',
                    items: [
                        {
                            id: 'notificationBtn',
                            align: 'left',
                            iconCls: 'bolt x-icon-mask',
                            iconMask: true
                        }
                    ]
                },


                listeners: {
                    itemtap: function (dataview, index, target, record, evt) {
                        var el = Ext.get(evt.target);
                        this.fireEvent('tapDestinations', record, el);
                    }
                },
                itemTpl: [
                    new Ext.XTemplate(
                        '<div class="img"><img class="photo" src="{logoURL}" /></div>'
                    ).html
                ]
            }
        ]
    }
});

In the controller for 'More' I am getting the event from tapDestinations, doing some stuff and then calling pushView with the resulting view.

Code:

pushView: function(view) {
        this.getMorePanel().animateActiveItem(view, this.slideLeftTransition);
    },
    popView: function(view) {
        this.getMorePanel().animateActiveItem(view, this.slideRightTransition);
    },

and I'm calling popView when back is tapped in the subView with Ext.create('CX.view.More') as the parameter. This works visually but the second time I tap an item I start noticing that its registering two events. Then the third time it calls pushView three times. There is also no animation at this point.

Is there a better way of navigating between containers in a tabpanel without using navigationview? And how do I return to the previous view after calling animateActiveItem?

Hopefully this makes sense and I appreciate any help I get.