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