PDA

View Full Version : Noob: How to get a long page of content inside a carousel to scroll vertically?



orangechicken
30 Jun 2010, 3:12 PM
Yes, this sounds like (and probably *is*) a newbie question, but I'll swallow my pride:

Given a panel full of images that's taller than the viewport, how do I get vertical scrolling to work? I bet this isn't even carousel related so the question could be generalized to this: How do I get the panel to size itself correctly so that I can view all its contents by scrolling vertically?

Code can be viewed at http://pastie.org/private/fhyen395twuxhozol4dahg

TommyMaintz
30 Jun 2010, 5:31 PM
Here is an example of how to do that.



// Add a page of content
var images = [
'images/image000.jpg',
'images/image001.png',
'images/image002.png',
'images/image003.jpg',
'images/image004.jpg',
'images/image005.jpg'
];

var str = images.map( function( path, index ){ return "<img src='" + path + "'/>"; }).join('');
var imagePanel = new Ext.Panel({
title: "Images",
cls: 'images-container',
html: str,
scroll: 'vertical'
});


// Create the carousel and add the panels
var remote = new Ext.Carousel({
fullscreen: true,
items: [imagePanel, dPadPanel, numberPadPanel], // I have a couple other panels in the carousel; removed for brevity
indicator: false
});


Note that autoHeight is not needed and it is scroll: 'vertical' instead of vertical: 'scroll'.

I am interested to hear from you if a vertical scroller inside a horizontal carousel works though, so let us know.