I think what's happening is you're not using data properly. According to the API, it can only be an Object, so I guess it's meant for something else? If you add a store, everything works out properly:
Ext.define('MyView', {
extend: 'Ext.view.View',
requires: [
'Ext.XTemplate',
'Ext.data.Store'
],
id: 'MyView',
itemId: 'MyView',
width: 400,
itemSelector: '.product',
initComponent: function () {
var me = this;
// Take note of the store that's being created with your initial data
Ext.applyIf(me, {
store: Ext.create('Ext.data.Store', {
fields: ['name', 'url'],
data: [{
name: 'ATM',
url: './icons/atm.png'
}, {
name: 'BAR',
url: './icons/bar.png'
}, {
name: 'GAS STATION',
url: './icons/gas_filling_station.png'
}, {
name: 'GYM',
url: './icons/gym.png'
}, {
name: 'HOSPITAL',
url: './icons/hospital.png'
}, {
name: 'PARK',
url: './icons/park.png'
}, {
name: 'SALOON',
url: './icons/saloon.png'
}, {
name: 'SCHOOL',
url: './icons/school.png'
}, {
name: 'SHOPPING MALL',
url: './icons/shoppin_mall.png'
}, {
name: 'SUPERMARKET',
url: './icons/supermarket.png'
}]
}),
itemTpl: [
'<tpl for=".">',
'<div class="product">',
'<img width="120" height="120" src="{url}"/>',
'<strong>{name}</strong>',
'</div>',
'</tpl>'
],
listeners: {
itemclick: {
fn: me.onDataviewItemClick,
scope: me
}
}
});
me.callParent();
},
onDataviewItemClick: function (dataview, record, item, index, e, eOpts) {
console.log('click');
alert('working');
}
});