Event delegation in list

[tolbahady]

Yes, I should have changed the name to (e) or (event),

[Salim Drame]

Hi all!

I have different items on each of my itemlist in my list I want to put two different handlers accordingly to where the user tap. Here is some code

listeners: {
                        itemtap: function(view, index, item, e) {
                            console.log(view);
                            var rec = view.getStore().getAt(index);
                            HomeDetails.update(rec.data);
                            BackHome.setTitle(rec.data.game);
                            Home.setActiveItem('homedetails');
                        },
                        delegate: '.notNavigate',
                        itemtap: function() {
                            alert("Coucou");
                        },
                        delegate: '.navigate',
                    }

This code works when i run each itemtaps events by itself while the other one is hidden. I can't make them work all together though otherwise they do the same thing. How can i fix that?

Thx for your help

[robboerman]

You can also just put the item's id in the dom and fetch it from there:

...
tpl: '<tpl for="."><li><img userid="{id}" src="{avatar}" /><h1>{name}</h1></li></tpl>',
listeners: {
    el: {
        tap: function(evt, elem){
            var userId = elem.getAttribute('userid');
            doSomethingFunkyWithMyUser(userId);
        },
        delegate: 'img'
    }
}
...

More than one way to do it

Cheers,
R

[pm.sreejith]

Hi could anyone tried event delegation in list,.

I used this to make it work anyway

listeners:{
                itemtap:function(list, index, item, e){
                    var rec = list.store.data.get(index);
                    var image = e.getTarget("img");
                    if(image){
                        alert("image clicked");
                    }
                }
            }

Hi tomalex0,

I was followed your method which is mentioned above. According to that, I made changes in my application, even though I'm not getting the tap event. Code from my application given below. Please go through it and let me know if it have any issues.

Ext.define('Sencha.view.ContentList', {
    extend: 'Ext.List',
    requires: ['Sencha.store.Contentlist'],    
    xtype: 'contentlist',
    
    config: {
        width:  350,
        itemTpl: '<div><font size="2">{catogory}</font></div>',
        store: 'Contentlist',
        scrollable: 'vertical',
        onItemDisclosure: true,
        scope:this
    },

    listeners:{
        itemtap:function(ContentList, index, item, e){
            var rec = ContentList.store.data.get(index);
            var image = e.getTarget("img");
            if(image){
                alert("image clicked");
            }
        }
    }    
});

Thanks in advance

[tomalex0]

Is you itemtap event not working? Also there is no img tag in your tpl.

Can you explain bit more about what you looking for?

[pm.sreejith]

Hi,

Ext.define('Sencha.view.ContentList', {
    extend: 'Ext.List',
    requires: ['Sencha.store.Contentlist'],    
    xtype: 'contentlist',
    
    config: {
        width:  350,
        itemTpl: '<div><font size="2">{catogory}</font></div>',
        store: 'Contentlist',
        scrollable: 'vertical',
        onItemDisclosure: true,
        scope:this
    },

    listeners:{
        itemtap:function(ContentList, index, item, e){
            var rec = ContentList.store.data.get(index);
            var image = e.getTarget("img");
            if(image){
                alert("image clicked");
            }
        }
    }    
});

Sorry, I forgot to repace img tag with div. Just now I done. My aim is to get the category specified in the tpl on the click event.

Thanks in advance...

[tomalex0]

Did you tried

var rec = ContentList.store.data.get(index);
console.log(rec)
console.log(rec.get('catogory'));

Probably you have catogory value in store record itself. Don't need to get value rendered in tpl

[dobie_]

When adding listeners and handlers, is it better to attach something to body or el?
Also, whats the best way to handle capturing multiple events and assigning different delegates to them?
Currently I'm using the following solution but it has some performance problems.

// This has to capture a tap event application wide
panelObj.body.on({
tap: function(e, t) {
// do something
}});

// this has to capture double tap only on specific images
panelObj.body.on({
delegate: ['img.abc1', 'img.abc2'],
doubletap: function(e, t) {
// do something else
}});

I'm also curious about the best way to define multiple event handlers.