PDA

View Full Version : index of Carousel item



OliverD
14 Jul 2010, 10:42 AM
Is there a way to retrieve the index of the current item being displayed in a Carousel?

TommyMaintz
14 Jul 2010, 1:26 PM
carousel.items.indexOf(carousel.layout.getActiveItem());

OliverD
15 Jul 2010, 9:46 AM
Perfect, thank you very much!

daveamos
20 Jul 2010, 12:04 PM
When I try that, I get "carousel.layout.getActiveItem is not a function". Here's my code:


var carouselindex = carousel.items.indexOf(carousel.layout.getActiveItem());

evant
20 Jul 2010, 5:46 PM
Chances are you're trying to execute it at a point where it's not rendered yet.

daveamos
26 Jul 2010, 12:48 PM
Yes, I think you are right! Depending on where I move the elements, I get either -1 or undefined. What it doesn't show me is the index of the carousel item! Do you see anything obvious missing in this code? Thanks, evant -- you've been so helpful.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var carousel = new Ext.Carousel({
indicator: true,
direction: 'vertical',
centered: true,
cls: 'card',
ui: 'light',
height: 400,
width:512,
listeners: {
afterrender: function(c){
c.body.on('doubletap', showCenteredOverlay);
}
},
items: [{
id: '0',
title: 'Tab 1',
html: '<img src="images/vanwittel_450.jpg" style="margin:40px;" /><p>Gaspar Van Wittel <span class="years">(1653-1736)</span><br />Piazza del Popolo <span class="years">(1678)</span></p>',
},
{
id: '1',
title: 'Tab 2',
html: '<img src="images/piranesi_450.jpg" /><p>Piranesi</p>',
},
{
id: '2',
title: 'Tab 3',
html: '<img src="images/panini_450.jpg" /><p>Panini</p>',
}]
});

var overlay = new Ext.Panel({
title: 'Hi',
html: '<p style="color:#000;">' + carouselindex + '<p>',
floating: true,
centered: true,
modal: true,

});

var showCenteredOverlay = function(btn, event) {
overlay.setCentered(true);
overlay.show()
};

var fixedimage = new Ext.Panel({
title: 'Fixed Image',
html: '<img src="images/vasi_med.jpg"/><p>Giuseppe Vasi</p>',
width: 512,
listeners: {
afterrender: function(c){
c.body.child('img').on('doubletap', showCenteredOverlay);
}
}
});

var comparescreen = new Ext.Panel({
fullscreen: true,
layout: 'hbox',
cls: 'layout',
items: [carousel,fixedimage]
});
var carouselindex = carousel.items.indexOf(carousel.layout.getActiveItem());
}
});

evant
26 Jul 2010, 4:09 PM
I don't see anything obvious, your code runs fine for me with the latest version of source control (no errors).

daveamos
26 Jul 2010, 8:33 PM
Hmm... when you tried it did you get the correct ids of the carousel items?

Thanks for running my code!

evant
26 Jul 2010, 10:01 PM
Think about the order:

1) Create the overlay, setting the html with carouselIndex
2) Create the carousel
3) Setup the variable carouselIndex

You're essentially doing:



x = a + b
a = 1;
b = 1;
// Why is x not 2?

daveamos
27 Jul 2010, 11:43 AM
Thanks -- you make a good point about order. If I define carouselIndex before I define the carousel, nothing even shows up! I still tried every other possible order, including the one you posted (see below), but I still get "undefined" in the overlay instead of the carousel item index. Maybe there's a bug somewhere?


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var overlay = new Ext.Panel({
title: 'Hi',
html: '<p style="color:#000;">' + carouselindex + '<p>',
floating: true,
centered: true,
modal: true,

});

var showCenteredOverlay = function(btn, event) {
overlay.setCentered(true);
overlay.show()
};

var carousel = new Ext.Carousel({
indicator: true,
direction: 'vertical',
centered: true,
cls: 'card',
ui: 'light',
height: 400,
width:512,
listeners: {
afterrender: function(c){
c.body.on('doubletap', showCenteredOverlay);
}
},
items: [{
id: '0',
title: 'Tab 1',
html: '<img src="images/vanwittel_450.jpg" style="margin:40px;" /><p>Gaspar Van Wittel <span class="years">(1653-1736)</span><br />Piazza del Popolo <span class="years">(1678)</span></p>',
},
{
id: '1',
title: 'Tab 2',
html: '<img src="images/piranesi_450.jpg" /><p>Piranesi</p>',
},
{
id: '2',
title: 'Tab 3',
html: '<img src="images/panini_450.jpg" /><p>Panini</p>',
}]
});

var fixedimage = new Ext.Panel({
title: 'Fixed Image',
html: '<img src="images/vasi_med.jpg"/><p>Giuseppe Vasi</p>',
width: 512,
listeners: {
afterrender: function(c){
c.body.child('img').on('doubletap', showCenteredOverlay);
}
}
});

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

var carouselindex = carousel.items.indexOf(carousel.layout.getActiveItem());
}
});