PDA

View Full Version : How to get correct active item as part of activeitemchage on carousel



stirucherai
20 Dec 2011, 3:33 AM
I have carousel with 5 items. I have added following code



Ext.ComponentMgr.get("Carousel").on("activeitemchange", function(me, value, oldValue, index)
{
console.log(this.getActiveIndex());
});



Following is what gets displayed on console
-1 when carousel is loaded (with 5 items)
0 when swiped to second item (left to right swipe)
1 when swiped to third item
2 when swiped to fourth item
3 when swiped back to third item (right to left swipe)
2 when swiped back to second item
1 when swiped back to 3rd item
2 when swiped back to 4th item

so the getActiveItem is not show correct value. "activeitemchange" event gets triggered after item has been switched and hence thought getActiveItem will give correct value

What am I doing wrong. I need the current Index of the item that is being changed to.

mitchellsimoens
20 Dec 2011, 4:08 AM
Ext.create('Ext.carousel.Carousel', {
fullscreen : true,
items : [
{
html : 'one'
},
{
html : 'two'
},
{
html : 'three'
},
{
html : 'four'
}
],
listeners : {
activeitemchange: function(carousel, newCard) {
console.log(carousel.getInnerItems().indexOf(newCard));
}
}
});


Looks like the activeIndex is being set after the activeitemchange is happening as getActiveIndex() should return the proper index when the activeitemchange happens. The above code will get the proper index.

stirucherai
20 Dec 2011, 9:59 PM
Great it works. Thanks a lot.