Ответ в этом случае состоял в том, чтобы предотвратить дублирование создания subTabPanel и его карусели.
Окно просмотра теперь выглядит так:
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);
}
});
И с тех пор я удалил дублирующее создание этих элементов TabPanel из свойства items:
и переместил их специфичные для tabBar свойства в классы представления SubTabPanel, Tab2 и Tab3 (каждый из которых является расширением либо Ext.TabPanel, либо Ext.Panel).