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.