Get tap event in Controller from a html div inside Img panel

[Mike6679]

I'm trying to get a tap event to fire inside my controller for my html div inside an img panel . I think I just don't have the ref selector quite right and tried so many combinations. I know this works: hotspotTap: '[action=hotspot_tap]' , but that gives me an event on the entire img panel I just want an event triggered for the hotspot in the html.

Controller:

Ext.define('epiduo_ped.controller.CtrlOverlay', {
    extend: 'Ext.app.Controller',
    
     config: {
        refs: { 
            hotspotTap: 'div[action=hotspot_tap]'
            
            
        },


        control: {
            
            hotspotTap: {
                tap: 'onHotspotTap'
            }
        ...

img panel:

Ext.define('epiduo_ped.view.1-0.Page_1-0',
{
    extend:  'epiduo_ped.view.Page',  
    xtype:   'page1-0',
   
    
    config:
    {
      src: 'app/view/1-0/images/slide.png',
      action: 'hotspot_tap' ,
        
      html:
      [
	  
         '<div id="page1-0_A" class="hotspot"></div>'
          
      ].join("")
    }
    
});

[felixfeng]

tap: function(list, index, target, record, event) {
console.log(event.target.id);
var targetID = event.target.id;
if (targetID == 'your div id') {
Ext.Msg.alert("Delete Action");
} else {
Ext.Msg.alert("item tap action trigger");
}

[bluehipy]

Use delagates on your view

listeners:{
          itemtap:function(){
                           
          },
          delegates:'div' // your selector
   
}

[Mike6679]

I created a listener with div.hotspot as my delegate than pass it to my controller
listeners: [
{
element: 'element',
delegate: 'div.hotspot',
event: 'tap',
fn: function(e) {

//ok now pass e (e.target.id) (the div id ) to a controller:
me.fireEvent('hotspottap', e);

}
}
]