1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default Event delegation in list

    Event delegation in list


    Hi,

    Based on http://www.sencha.com/blog/2010/11/1...-sencha-touch/ i have tried to implement in a list

    Code:
    var list = new Ext.List({
        tpl: '<tpl for="."><li><img src="{avatar}" /><h1>{name}</h1></li></tpl>',
        listeners: {
            el: {
                tap: function(){
                },
                delegate: 'img'
            }
        }
    });
    If i use itemtap i could get details like
    Code:
    “itemtap”: function(list, index, item, e)
    How could i get these value when i used event delegation technique in a list.
    I just only want to make a particular tag selectable.

  2. #2
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Hi could anyone tried event delegation in list,.

    I used this to make it work anyway
    Code:
    listeners:{
    				itemtap:function(list, index, item, e){
    					var rec = list.store.data.get(index);
    					var image = e.getTarget("img");
    					if(image){
    						alert("image clicked");
    					}
    				}
    			}

  3. #3
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Did anyone tried this.
    Seems all are busy at conference


    i used to try something like this before

    Code:
    "itemtap": function(list, index, item, e) {
    			var imageclick = e.getTarget("img");
    			var rec = list.store.data.get(index);
                             if(imageclick){
                                alert("Image clicked");
                              }
    }

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    44
    Vote Rating
    0
    senchauser2010 is on a distinguished road

      0  

    Default


    I too have this question. In short it's how can I get equivalent of

    “itemtap”: function(list, index, item, e)

    using the event delegation model described here?

  5. #5
    Sencha User
    Join Date
    Jul 2007
    Posts
    6
    Vote Rating
    0
    lagentz is on a distinguished road

      0  

    Default


    did anybody find an elegant solution / answer to Thomas' question?

  6. #6
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Did you tried
    Code:
     e.getTarget("img");

  7. #7
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    195
    Vote Rating
    2
    hitman01 is on a distinguished road

      0  

    Default


    When adding listeners and handlers, is it better to attach something to body or el?
    listeners: {
    body: { // or el
    delegate: ['div.mini_left img', 'div.mini_right img', 'div.mini_single img'],
    tap: function(e, t){
    // do something
    }
    }}

    Also, whats the best way to handle capturing multiple events and assigning different delegates to them?
    Currently I'm using the following solution but it has some performance problems.

    // This has to capture a tap event application wide
    panelObj.body.on({
    tap: function(e, t) {
    // do something
    }});

    // this has to capture double tap only on specific images
    panelObj.body.on({
    delegate: ['img.abc1', 'img.abc2'],
    doubletap: function(e, t) {
    // do something else
    }});

  8. #8
    Sencha User interfasys's Avatar
    Join Date
    Mar 2011
    Location
    UK & Switzerland
    Posts
    125
    Vote Rating
    1
    interfasys is on a distinguished road

      0  

    Default


    After having done some tests, there seems to be no noticeable improvements over 'onitemtap'.

  9. #9
    Sencha User
    Join Date
    May 2011
    Posts
    11
    Vote Rating
    0
    tolbahady is on a distinguished road

      0  

    Default


    I have done something like this:
    Code:
    var list = new Ext.List({
        tpl: '<tpl for="."><li><img id="{#}" src="{avatar}" /><h1>{name}</h1></li></tpl>',
        listeners: {
            el: {
                tap: function(item){
                      var index = item.target.id-1;
                      console.log("index is: "+index);
                },
                delegate: 'img'
            }
        }
    });
    Once you get the index you can use the store to get the data

  10. #10
    Sencha User interfasys's Avatar
    Join Date
    Mar 2011
    Location
    UK & Switzerland
    Posts
    125
    Vote Rating
    1
    interfasys is on a distinguished road

      0  

    Default


    @tolbahady
    Just watch out. Your argument isn't an item, it's an EventObject.

Similar Threads

  1. When to use event delegation?
    By dolittle in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 4 Nov 2008, 9:35 AM
  2. what is event delegation?
    By illuminum in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 28 Jun 2008, 4:57 PM
  3. Click Delegation Help
    By thejoker101 in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 13 Jan 2007, 11:54 PM
  4. YUI Question : Event Delegation
    By INeedADip in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 23 Oct 2006, 2:08 PM

Thread Participants: 9

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