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
    36,791
    Answers
    3465
    Vote Rating
    833
    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
    36,791
    Answers
    3465
    Vote Rating
    833
    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..

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi