Question

EDIT

I have a viewport that extends a TabPanel. In it, I set one of the tabBar buttons to load another TabPanel called subTabPanel. myApp.views.viewport.setActiveItem(index, options) works just fine. But myApp.views.subTabPanel.setActiveItem(index, options) only loads the appropriate panel card for a split second before it vanishes.

Strangely, it works just fine to make this call from within the subTabPanel’s list item:
this.ownerCt.setActiveItem(index, options)
However, I want to avoid this, as I want such actions to live inside controllers so as to adhere to MVC.

Any thoughts on why the card disappears when called from the controller, but not when called from the containing subTabPanel?

(The subTabPanel card in question is an extension of Ext.Carousel.)

UPDATE

It looks like both subTabPanel and its carousel are being instantiated twice somehow, so that could be a big part of the problem…

Answer 1

The answer in this case was to prevent the duplicate creation of the subTabPanel and its carousel.

The viewport now looks like this:

myApp.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    listeners: {
        beforecardswitch: function(cnt, newCard, oldCard, index, animated) {
            //alert('switching cards...');
        }
    },
    tabBar: {
        ui: 'blue',
        dock: 'bottom',
        layout: { pack: 'center' }
    },
    items: [],
    initComponent: function() {
        //put instances of cards into myApp.views namespace
        Ext.apply(myApp.views, {
            subTabPanel: new myApp.views.SubTabPanel(),
            tab2: new myApp.views.Tab2(),
            tab3: new myApp.views.Tab3(),
        });
        //put instances of cards into viewport
        Ext.apply(this, {
            items: [
                myApp.views.productList,
                myApp.views.tab2,
                myApp.views.tab3
            ]
        });
        myApp.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

And I’ve since removed the duplicate creation of those TabPanel items from the items: property and moved their tabBar-specific properties into the view classes SubTabPanel, Tab2 and Tab3 (each of which are extensions of either Ext.TabPanel or Ext.Panel).