controller:
Ext.define('MyApp2.controller.MyController1', { extend: 'Ext.app.Controller', config: { control: { "#image2": { tap: 'onImageTap' } } }, onImageTap: function(image, e, eOpts) { console.log('img2 tap'); } });
view:
Ext.define('MyApp2.view.MainView', { extend: 'Ext.carousel.Carousel', alias: 'widget.mainview', requires: [ 'Ext.Panel', 'Ext.Label', 'Ext.Img' ], config: { itemId: 'mainView', items: [ { xtype: 'panel', itemId: 'panel1', items: [ { xtype: 'label', centered: true, html: 'Panel 1', itemId: 'label1' }, { xtype: 'image', height: 201, id: 'image1', itemId: 'image1', src: 'images/sencha.png' } ] }, { xtype: 'panel', itemId: 'panel2', items: [ { xtype: 'label', centered: true, html: 'Panel 2', itemId: 'label2' }, { xtype: 'image', height: 201, id: 'image2',//reference this id to attach event handler itemId: 'image2', src: 'images/sencha.png' } ] }, { xtype: 'panel', itemId: 'panel3', items: [ { xtype: 'label', centered: true, html: 'Panel 3', itemId: 'label3' }, { xtype: 'image', height: 201, itemId: 'image3', src: 'images/sencha.png' } ] }, { xtype: 'panel', itemId: 'panel4', items: [ { xtype: 'label', centered: true, html: 'Panel 4', itemId: 'label4' }, { xtype: 'image', height: 201, itemId: 'image4', src: 'images/sencha.png' } ] } ] } });