Search code examples
extjssencha-touchsencha-touch-2

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

Solution

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