CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2
icese7en
icese7en

Reputation: 142

sencha touch list tpl event reference

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>'
),

Upvotes: 1

Views: 447

Answers (1)

Dinkheller
Dinkheller

Reputation: 5074

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'
        }
    ]
}

Upvotes: 2

Related Questions