PDA

View Full Version : Carousel with image snippet/trying to center image...



jaypompano
14 Apr 2011, 11:53 AM
I have a TabPanel with an item containing a Panel with a Carousel in the Panel.

The Carousel has <img> html which point to JPGs. Works really well but I'm having a problem centering the image. It's always off to the left.

I've tried wrapping <img> in a div (commented out code below), which allows me to center, but gives me other problems because it puts it into another container which seems to restrict the behavior of the image and cutting off image.

I've also tried putting layout configs in various levels of the containers which don't really do anything.

Anyone else run into this problem or have a solution? Thank you in advance...

Code...


//TabPanel...
TabPanel = new Ext.TabPanel({
id: 'bottomTabPanel',
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {pack: 'center'}
},
ui: 'light',
fullscreen: true,
cardSwitchAnimation: 'slide',
items:
[{
title: 'Find',
id: 'find',
items: [XXX.Find.ViewPanel],
iconCls: 'search_black
'}]

...

//View panel...
var viewPanel = new Ext.form.FormPanel({
items: [],
fullscreen: true
});

//carousel items...
var carouselItems = [];

for (var i = 0; i < JSON.DocumentResults.Documents[0].RenderedImages.Files.length; i++) {
var carouselItemRow = {
// html: "<div style='text-align:center;' id='carouselImage'><img width='80%' src='" +
// "../userclient/" +
// JSON.DocumentResults.Documents[0].RenderedImages.DocumentPath + "/" +
// JSON.DocumentResults.Documents[0].RenderedImages.Files[i] +
// "'/></div>'"
html: "<img id='carouselImage' height='95%' style='text-align:center;' src='" +
"../userclient/" +
JSON.DocumentResults.Documents[0].RenderedImages.DocumentPath + "/" +
JSON.DocumentResults.Documents[0].RenderedImages.Files[i] +
"'/>'"
};

carouselItems[i] = carouselItemRow;
}

//carousel...
var carousel = new Ext.Carousel({
fullscreen: true,
indicator: true,
centered: true,
scroll: 'vertical',
layoutOnOrientationChange: true,
items: [carouselItems]
});

viewPanel.add(carousel);
viewPanel.doLayout();

nigelskeels
11 Aug 2011, 9:45 AM
Did anyone find the solution to this?