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
    193
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar