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