sencha touch list tpl event reference

Question

In my list view, I put addEventListener( alias on) in my initialize event

initialize: function (component) {
        component.element.on({
            tap: {
                scope: this,
                fn: 'onTap',
                delegate: 'div.side-itemDelete'
            }
        });
    },

But if there are more delegate( other element with id or class) I need to bind an event, how can I handle it?
This is my XTemplate:

new Ext.XTemplate(
    '<div class="side-weatherListItem no-dragging">',
        '<div class="side-itemLocation">',
            '<div>{[values.city.toUpperCase()]}</div>',
            '<div>{[values.text.toUpperCase()]}</div>',
        '</div>',
        '<div class="side-itemTemperature">{temp}°{unit}</div>',
        '<div class="side-itemState">',
            '<div><img src="./resources/img/rain.svg"></div>',
            '<div class="side-itemDate">11:38</div>',
        '</div>',
        '<div class="side-itemDelete" fire="onDelete">', // <<---- here
            '<img src="./resources/img/delete.svg">',
        '</div>',
    '</div>'
),

What events are you trying to bind? Also to display this are you using a list? — Darly
@Darly yes, I'm using a list. For instance, now I have bind an event to side-itemDelete by delegate: 'div.side-itemDelete', if I want to bind an event on div.side-itemTemperature or more other element with tap event, how can I do? — icese7en
@Proto Bassi beat me to the answer. The listener accepts multiple events(takes in an array of events to be accurate). Every Time a new item is made all the events are binded — Darly

Dinkheller Dinkheller · Accepted Answer · 2014-10-21T19:23:07

You need to specify several listeners:

{
    xtype: 'list',
    listeners: [
        {
            event: 'tap',
            fn: function(){
                console.log('delete');
            },
            element: 'innerElement',
            delegate: '.side-itemDelete'
        },
        {
            event: 'tap',
            fn: function(){
                console.log('locate');
            },
            element: 'innerElement',
            delegate: '.side-itemLocation'
        }
    ]
}

sencha touch list tpl event reference

1 Answers