Results 1 to 7 of 7

Thread: Event Delegation in custom html element into xtemplate

  1. #1

    Default Answered: Event Delegation in custom html element into xtemplate

    Hi,
    i read some posts related to listening to events triggered by
    html elements created in xtemplate blocks using event delegation but
    they were all related to sencha touch, is it possible to do something
    like this even in extjs 4?

    Thanks

  2. The same concept can be used for Ext JS

    Code:
    new Ext.panel.Panel({
        renderTo  : document.body,
        width     : 400,
        height    : 400,
        title     : 'Event Delegation Test',
        tpl       : '<tpl for="."><div><span class="foo-div">{foo}</span> {bar}</div></tpl>',
        data      : [
            { foo  : 'One',   bar : 'one'   },
            { foo  : 'Two',   bar : 'two'   },
            { foo  : 'Three', bar : 'three' }
        ],
        listeners : {
            element  : 'el',
            delegate : 'span.foo-div',
            click    : function() {
                console.log('click');
            }
        }
    });
    If you run this code, you will only get a click in the console if you click on the left number but if you click on the ones on the right (lowercase ones) it will not be listened to.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    The same concept can be used for Ext JS

    Code:
    new Ext.panel.Panel({
        renderTo  : document.body,
        width     : 400,
        height    : 400,
        title     : 'Event Delegation Test',
        tpl       : '<tpl for="."><div><span class="foo-div">{foo}</span> {bar}</div></tpl>',
        data      : [
            { foo  : 'One',   bar : 'one'   },
            { foo  : 'Two',   bar : 'two'   },
            { foo  : 'Three', bar : 'three' }
        ],
        listeners : {
            element  : 'el',
            delegate : 'span.foo-div',
            click    : function() {
                console.log('click');
            }
        }
    });
    If you run this code, you will only get a click in the console if you click on the left number but if you click on the ones on the right (lowercase ones) it will not be listened to.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3

    Default

    Thank you Mitchell it solved my problem

  5. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    4

    Default

    Is there any way to get this kind of interaction from ExtJs 3.3.3 or older? I don't think I can use this method since the delegate feature is only available from 3.4.0 and above.

  6. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    You'd need to modify it slightly since components don't support element listeners in that format, but event delegation is available and has been for quite a while:

    Code:
    view.el.on('click', function() {
    }, null, {delegate: '.foo});
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    4

    Default

    Hi Evant,

    I still can't seem to get it to recognize certain clicks.

    I am using a ComboBox implementation with a custom template as followed;

    var listValueTpl =
    ...
    '<div class="testdiv1">' + '{[escapeHTML(values.alias)]}' +
    '<span class="testclick1" style="color: #aaaaaa;font-size: 0.9em;"> ........ </span>' +
    '</div>'
    ...;

    var dropDown = new packagename.SimpleDropDown( {
    fields : [ ...],
    listValues : listValues,
    ...
    tpl : listValueTpl,
    cls : ...
    ...
    listeners : {
    select : function(combo, record, index) {
    console.log("selected item #" + index);
    }
    }
    });

    dropDown.el.on('click', function() {
    console.log("click on span!");
    }, null, {delegate: 'span.testclick1'});
    dropDown.el.on('click', function() {
    console.log("click on div!");
    }, null, {delegate: '.testdiv1'});

    Here, I am only able to log the select listener console logs, both div and span are not triggering their own onclick. Did I miss something?


    Thanks for your help!!

  8. #7
    Sencha User
    Join Date
    Aug 2012
    Posts
    4

    Default

    Seems like in this post, the listener had to be attached to a listconfig (perhaps since it is a ComboBox and not a panel?)
    http://www.sencha.com/forum/showthread.php?158991-ComboBox-custom-template-how-do-I-attach-a-click-handler

    Sorry if some of this is obvious, I am new to ext

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •