Adding a Carousel to Tabbed Panel

[napsys]

As a first test - I began with the 'Tabs 2' example and added the carousel1 object def. copied from the Carousel example.

Then in the Ext.setup - onready() function I also added:

var myTabPanel = Ext.getCmp('tab3');
myTabPanel.add(carousel1);
myTabPanel.doLayout();


In the Safari debugger I can see my objects okay in the hierarchy - but alas, the carousel does not appear in the browser - why would that be?

Thanks for your help.

[evant]

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function(){
var tabs = new Ext.TabPanel({
fullscreen: true,
items: [{
html: 'a'
}]
});

(function(){
tabs.add({
title: 'Foo',
xtype: 'carousel',
items: [{
html: '1'
},{
html: '2'
}]
});
tabs.doLayout();
}).defer(3000); // 3 seconds later
}
});

[ericnon]

I think I am seeing this same problem - i'm attempting to add a carousel to a panel, significantly after the panel has loaded, like this:


//create the page carousel
var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});


mainPanel.add(carousel1);
mainPanel.doLayout();

The carousel DOM shows up when I inspect the page, but is not visibly appearing in the browser. The post above implies we need to put a delay on the layout? Does the carousel object take a lot of time to create?

Thanks