Carousel within TabPanel

[mattjones701]

Hi,

I am trying to embed a Carousel object within a TabPanel.
Here is the code I have now.

Viewport.js

Ext.define("GCRUs.view.Viewport", {    extend: 'Ext.TabPanel',
    config: {
    	fullscreen: true,
    	title: 'Gadget Covers R Us',
    	tabBarPosition: 'bottom',
    	defaults: {
            styleHtmlContent: true
        },
    	items: [
    	        {
    	        	title: 'Products',
    	        	iconCls: 'star',    
    	        	xtype: 'productSelectPage'
    	        }
    	]
    }
});

ProductSelect.js

Ext.define('GCRUs.view.ProductSelect', {    extend: 'Ext.Panel',
    requires: [
              'Ext.TitleBar',
              'GCRUs.view.ProductCarousel'
    ],
    xtype: 'productSelectPage',
    config: {		
    	items: [
    	        {
    	            xtype: 'titlebar',
    	            docked: 'top',
    	            title: 'Products'
    	        },
    	        {
    	        	xtype: 'productCarouselPage'
    	        }
    	]


    }

});

ProductCarousel.js

Ext.define('GCRUs.view.ProductCarousel', {	extend: 'Ext.Carousel',
	xtype: 'productCarouselPage',
	config: {
    	defaults: {
    		styleHtmlContent: true
    	},
    	items: [
    	        {
    	            html : 'Item 1',
    	            style: 'background-color: #FF0000'
    	        },
    	        {
    	            html : 'Item 2',
    	            style: 'background-color: #00FF00'
    	        }
    	]
	}
});

Currently I see the TabPanel containing the products icon. And the Products Titlebar but nothing else.

Can you see what I am doing wrong?

Thanks

[mitchellsimoens]

You are overnesting. The carousel does not need to be within a panel like you have it. The carousel can have the titlebar on it and be a direct child item of the tab panel and all will work.

[mattjones701]

Awesome thanks for the help