Tap event for panel in Carousel?

[cn8319]

How would I edit the following example at:


http://try.sencha.com/touch/2.0.0/ex...el/viewer.html


so that when you click on a image within the carousel I display the name of the image?


I tried editing the following and got the tap listener to work, but I am logging the last iteration in the loop and not the actual panel I am tapping on?




for (j = 1; j <= itemsCountPerCategory; j++) {
//and push each of the image as an item into the items array
//you can see we are using the img xtype which is an image component,
//and we just give is a custom cls to style it, and the src
//of the image



items.push({
xtype: 'image',
cls: 'my-carousel-item-img',
src: 'resources/photos/' + category + '/' + j + '.jpg',

// Add some code here to hndle the swipe or click of image
listeners : {
tap : function() {
console.log(j);
}
}

});


}


Thanks

[mitchellsimoens]

Instead of using j (you should really use variable names that are meaningful), use the scope of the listener which in this case will be the Ext.Img instance that was tapped on.