How to listen for itemtap on custom components - Ext.Container?

[digeridoopoo]

Hi,

How would I go about adding tap/click listeners for generated items that are Ext.Containers? They are created in my onCarouselPainted function so they are child items of an Ext.Carousel (if you can imagine an MVC-based multi item carousel). Here is an item from the store (there are about 12 images. Here's 1):

 config: {
        data: [
            {
                page: 1,
                index: 1,
                title: '1.jpg',
                image: 'http://www.blah.com/touch/tc/resources/img/1.jpg',
                action: 'tap'
            },

I have an action property for each item, but I guess I could just as easily use the unique index number that I have as a reference for each thumbnail, but I'm not sure how to 'catch' or even listen for this, as the generated items are Ext.Components and the index and other info is stored as data in the store.

I've got it working with a list no problem with something like this, as the list has a built-in .on for the items:

contactList.on("itemtap",function(dataView,index,item,e){
var first_name = dataView.store.getAt(index).data.firstName;
var last_name = dataView.store.getAt(index).data.lastName;
});

The question is, how would I go about listening for the index number for a custom component in Sencha?

I've tried and am reasonably familiar with refs and actions and I've used these in the past but I'm not sure I can use these in this particular case.

Thanks

[haduki]

{
    listeners:{
        tap:{
            element:'element',
            fn:function(){
                console.info('tap');
                console.info('itemIndex:'+this.getParent().getInnerItems().indexOf(this));
            }
        }
    }
}

[digeridoopoo]

Thanks for the reply....it doesn't seem to work for me. I don't get any messages in the console - strange.

I tried this too:

Ext.define('MyApp.view.TwopageCarousel', {
    extend: 'Ext.carousel.Carousel',
    alias: 'widget.carousel',


    config: {
        id: 'Carousel',
        listeners: [
            {
                fn: 'onCarouselPainted',
                event: 'painted'
            },
            {
                fn: 'function',
                element: 'element',
                event: 'tap',
                delegate: 'element'
            }
        ]
    },


...etc

function: function(container) {
        console.log('tap');
        console.log('itemIndex:'+this.getParent().getInnerItems().indexOf(this));
    }

But I get nothing in the console. I think maybe the problem is I am using parameter 'container'?

I am not sure I understand the delegate and element parts.

[haduki]

The op said you want to add listener to component in carousel,so my post is for the item in carousel,not the carousel itself.
Here is listener for carousel:

listeners:[
            {
                fn: function(){
                     console.info('carousel paint');
                },
                event: 'painted'
            },
            {
                fn: function(){
                     var index=this.getActiveIndex();
                     var tapedItem = this.getActiveItem();
                     console.info(index);
                },
                element: 'innerElement',
                event: 'tap'
            
            }
        ]