1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    boniek83 is on a distinguished road

      0  

    Default Unanswered: Click event on the custom HTML element in XTemplate

    Unanswered: Click event on the custom HTML element in XTemplate


    Hi.

    In Sencha Touch 1.x, I was able to add click event listener to any HTML element in XTemplate. For example:
    PHP Code:
    tpl
    '<tpl for=".">' +                    
       
    '<p class="button">{name}</p>' +                     
    '</tpl>',               
    listeners: {    
      
    body: {      
        
    tapmyTapHandler,     
        
    delegate'.button'         
      
    }    
    }, 
    But this no longer work on Sencha 2.0.

    Adding listeners from controller to the HTML Element is not working either ( I have to use class name because this xTemplate element is repeated many times )
    PHP Code:
    this.control({  
        
    '.button' : {    
           
    tapthis.myTapHandler,  
         }
    }); 
    Can you please tell me if there is anyway I can add listeners to this HTML button repeated many times in XTemplate?

    Thank You

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3521
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The decision of the delegate config is underway. Currently it uses ComponentQuery but we still have a need to target certain DOM elements.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    boniek83 is on a distinguished road

      0  

    Default


    Thanks for respond. If anyone need it, I found temporary way to do it from controller. It seems to be working fine in Chrome but takes few lines of code:
    First we need wrap our tpl items in to div with id:

    PHP Code:
    tpl:
     
    '<div id="scroller">' +
      
    '<tpl for=".">' +                    
           
    '<p class="button">{name}</p>' +                     
      
    '</tpl>'+
     
    '</div>'
    and then in controller

    PHP Code:
    addListItemListener: function() {          
      var 
    listItems Ext.get("scroller").select("p.button").elements;  
      for (var 
    i=0i<listItems.lengthi++){    
        
    Ext.get(listItems[i]).on({      
          
    scope      this,     
          
    tap          'myTapHandler'         
        
    });  
      }       

    addListItemListener() should be called after HTML is rendered.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    shedd is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    The decision of the delegate config is underway. Currently it uses ComponentQuery but we still have a need to target certain DOM elements.
    Mitchell,
    We're struggling with this in our Sencha 2 conversion. Is this something that Premium Support could help us with?

    Thanks.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3521
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    We don't offer support till the product is is launched. We are still in PR stages. The problem is delegate gets used a lot internally so this one small config can have massive impact on the library.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    donaldking is on a distinguished road

      0  

    Default Answered?

    Answered?


    Hello Mitchel, please has the above been sorted out now? or any way of implementing this yet? Regards.

  7. #7
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Instead of finding an element and listening to the tap event of that; listen to the tap event on the entire component.element and figure out if the user tapped on the correct element using the returned element.target property. Something like this:

    Code:
    Ext.setup({
        onReady: function() {
            var component = Ext.Viewport.add({
                xtype: 'component',
                html: '<div class="button">button</div><div class="another">another</div>'
            });
    
            component.element.on({
                tap: function(e) {
                    var el = Ext.get(e.target);
                    if (el.hasCls('another')) {
                        console.log('you clicked another!');
                    }
                }
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    0
    chaobin is on a distinguished road

      0  

    Wink Add listener in controller, not working

    Add listener in controller, not working


    Hi, my problem is: I have to update a table based on the people's form entry, and do calculation and add different button combo there based on the analysis result, so my code do like:


    profilePanle.getAt(3).setHtml(this.doDescriptorTable(record.get('name'),analysisFormData,{


    onReady: this.addTypeListeners,


    scope: this


    });




    -----
    addTypeListeners:function(){
    console.log('addtypelisten');
    el = Ext.get('#aButtin');
    el.on({


    'tap' : this.onTpClick,
    'mouseover' : this.onTpMouseOver,
    'mouseout' : this.onTpMouseOut,




    });
    },


    onTpClick:function(e,t){alert(1);},


    onTpMouseOver:function(e,t){alert(2);},


    onTpMouseOut:function(e,t){alert(3);}


    I have tried add listener after set the HTML, however it never get called; and tried in init on controller, it caught undefined for the element; this just proved mission impossible? please help..