ExtJS 4 dataview Issue

Question 1

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');
  }
});

Question 2

Seems like you have to use a store instead of using a 'data' array..

Here's a working example:

http://jsfiddle.net/Vandeplas/57mNy/

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

Ext.define('Image', {
    extend: 'Ext.data.Model',
    fields: [
        { name:'name', type:'string' },
        { name:'url', type:'string' }
    ]
});

var store = Ext.create('Ext.data.Store', {
    id:'imagesStore',
    model: 'Image',
    data: data
});


Ext.define('MyApp.view.MyView', {
    extend: 'Ext.view.View',

    width: 400,
    itemSelector: '.product',

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            store: store,
            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(arguments);
    },

    onDataviewItemClick: function (dataview, record, item, index, e, eOpts) {
        console.log('click');
        alert('working');
    }

});

Ext.create('MyApp.view.MyView', {
    renderTo: Ext.getBody()
});