Carousel inside card layout?

[ssdesign]

Hi,
I am trying to make a UI using Card Layout.
In one of the cards, I need to nest a carousel.

This is how I am trying to do it:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: true,
onReady: function() {
createSplash();
}
});

function createSplash(){
this.imgCarousel = new Ext.Carousel({
defaults: {
cls: 'midlayer'
},
items: [{
html: 'Some image'
},
{
title: 'Tab 2',
html: '2nd Image'
},
{
title: 'Tab 3',
html: '3rd Image'
}]
});

p = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [
{
itemId: 'mainScreen',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
flex: 1,
cls: 'toplayer'
},
{
//flex: 3,
cls: 'midlayer',
layout:{
type: 'hbox',
align: 'stretch'
},
items:[imgCarousel]
},
{
flex: 2,
cls: 'toplayer'
}
]
},

imgCarousel
]
});
p.setCard(0);
}

I want the Carousel in the middle of the first card.
I dont get any errors, but Carousel is not visible.

[evant]

Well, you assign this.imgCarousel, then refer to it without the scope...

Also, you try and use it in 2 spots.

[ssdesign]

Hi,
I tried to refer with scope and still it doe snot show up.
So I removed the scope and again no show.

I also removed the duplicate (which was actually working if I directly load the second card by doing: p.setCard(1) ).

Its only this first card where I am trying to place the Carousel inside it.

[kim.hansen]

Try and add:

flex: 1

inside your:

defaults: {...


I had a similar problem with my carousel didn't show up. Only if I add the flex: 1 it works. I wanted to specifically define the width, but then it doesn't show up at all.

Hope this helps.

Kim