1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Vote Rating
    5
    Answers
    6
    Mike6679 is on a distinguished road

      0  

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

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


    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:

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

    Code:
    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("")
        }
        
    });

  2. Use delagates on your view

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

  3. #2
    Sencha User
    Join Date
    Jul 2012
    Location
    JiNan
    Posts
    10
    Vote Rating
    1
    felixfeng is on a distinguished road

      0  

    Default you can distinguish the different target of event and then handle it.

    you can distinguish the different target of event and then handle it.


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

  4. #3
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    612
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Use delagates on your view

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

  5. #4
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Vote Rating
    5
    Answers
    6
    Mike6679 is on a distinguished road

      1  

    Default


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

    }
    }
    ]

Thread Participants: 2

Tags for this Thread