Reputation: 85
I'm trying to add a carousel to a Panel view, which has several sub-panels inside. When I run the code though I can't see anything from the carousel. The other panels appear just fine. Here's the code I've got now
Ext.define('app.view.HeroDetail', {
extend: 'Ext.Panel',
requires: ['Ext.Carousel'],
xtype: 'herodetail',
layout: 'vbox',
fullscreen: true,
config: {
items: [
{
xtype: 'panel',
html: 'first panel',
flex: 1
},
{
xtype: 'carousel',
items: [
{
xtype: 'panel',
html: 'carousel1'
},
{
xtype: 'panel',
html: 'carousel2'
}
],
flex: 1
},
{
xtype: 'panel',
html: 'second panel',
flex: 1
}
]
}
});
What am I missing here?
Upvotes: 0
Views: 2229
Reputation: 555
Try this code. This is working for me. Defines layout:'vbox' inside config.
Ext.define('app.view.HeroDetail', {
extend: 'Ext.Panel',
requires: ['Ext.Carousel'],
xtype: 'camerapanel',
fullscreen: true,
config: {
layout: 'vbox', //defines layout inside config
items: [
{
xtype: 'panel',
html: 'first panel',
flex: 1
},
{
xtype: 'carousel',
flex: 1,
items: [
{
xtype: 'panel',
html: 'carousel1'
},
{
xtype: 'panel',
html: 'carousel2'
}
]
},
{
xtype: 'panel',
html: 'second panel',
flex: 1
}
]
}
});
Upvotes: 3