carousel in a tabpanel

[epalm]

Ext.setup({

icon: 'icon.png',
glossOnIcon: false,

onReady: function() {

new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: { pack: 'center' }
},
animation: 'fade',
items: [{
title: 'Search',
iconCls: 'search',
cls: 'card card1',
items: {
xtype: 'carousel',
items: [{
html: 'Card #1',
cls: 'card card1',
},{
html: 'Card #2',
cls: 'card card2'
},{
html: 'Card #3',
cls: 'card card3'
}]
}
},{
title: 'Other',
html: '<p>Something else could go here...</p>',
iconCls: 'info',
cls: 'card card2'
}]
});
}
});


TabPanel and Carousel work on their own, but if I put a Carousel inside a TabPanel, the Carousel doesn't budge.

Any suggestions?

[epalm]

Also, I keep seeing
cls: 'card cardN' in the examples. Are they necessary?

[TommyMaintz]

Those classes are just to give the cards different colors.

The reason the Carousel doesnt work is because you are overnesting. If you want to add a carousel as an item of a Tabpanel, you can just add it to the TabPanels items array. The following will work:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {pack: 'center'}
},
animation: 'fade',
items: [{
title: 'Search',
iconCls: 'search',
xtype: 'carousel',
items: [{
html: 'Card #1',
cls: 'card card1',
},{
html: 'Card #2',
cls: 'card card2'
},{
html: 'Card #3',
cls: 'card card3'
}]
}, {
title: 'Other',
html: '<p>Something else could go here...</p>',
iconCls: 'info',
cls: 'card card2'
}]
});
}
});


If you want to wrap a panel around it, you would have to specify a layout of 'fit' on that wrapping panel to have the carousel take up all the available space.

[epalm]

Got it. Much thanks. :)