Stubborn Carousel

[daveamos]

Hello! I have an odd problem with my carousel -- when I try to swipe it I can see the next picture coming on screen, but when I let go it snaps back to my original photo. I'm not sure what I'm doing wrong -- my code seems straightforward (below):



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var toolbar = new Ext.Toolbar({
dock: 'top',
items: [{
text: 'Back'
}]
});

var carousel2 = new Ext.Carousel({
indicator: true,
direction: 'vertical',
items: [{
title: 'Tab 1',
html: '<img src="images/image1.jpg" /><p>A sample caption</p>'
},
{
title: 'Tab 2',
html: '<img src="images/image2.jpg" />'
},
{
title: 'Tab 3',
html: '<img src="images/image3.jpg" />'
}]
});

var fixedimage = new Ext.Panel({
title: 'Fixed Image',
html: '<img src="images/image2.jpg" />'
});

var comparescreen = new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
layout: 'hbox',
items: [carousel2,fixedimage]
});
}
});


Any help would be great! Thanks!

[evant]

Give the carousel some kind of dimensions, most importantly, a height.

[arlo.carreon]

Yea, you definitely need to put some dimensions in your Carousel configuration. I ran into the same problem. I am also having issues with making my Panel fullscreen. When I make the panel full screen the pictures in my carousel disappear.

Anyone know how to work around that? For example can I manually get the detected width and height of the body, via sencha?

[TommyMaintz]

@arlo

What is the reason the images disappear? A fullscreen panel automatically uses the same dimensions as the body.

[arlo.carreon]

@Tommy

I am not sure why the photos disappear. The panel and the carousel it has inside do go fullscreen, but the images in the carousel do not show. Unless I put a fixed width and height on the images, then they do show.

[TommyMaintz]

Can you try the following code and see if it works?



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var toolbar = new Ext.Toolbar({
dock: 'top',
items: [{
text: 'Back'
}]
});

var carousel2 = new Ext.Carousel({
flex: 1,
indicator: true,
direction: 'vertical',
items: [{
title: 'Tab 1',
html: '<img src="images/image1.jpg" /><p>A sample caption</p>'
},
{
title: 'Tab 2',
html: '<img src="images/image2.jpg" />'
},
{
title: 'Tab 3',
html: '<img src="images/image3.jpg" />'
}]
});

var fixedimage = new Ext.Panel({
flex: 1,
title: 'Fixed Image',
html: '<img src="images/image2.jpg" />'
});

var comparescreen = new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
layout: {
type: 'hbox',
align: 'stretch'
},
items: [carousel2,fixedimage]
});
}
});