Hi,
I am trying to embed a Carousel object within a TabPanel.
Here is the code I have now.
Viewport.js
Code:
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
Code:
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
Code:
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