1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
    thehappynote is on a distinguished road

      0  

    Default Unanswered: HELP: Delegating Listeners to an ID in XTemplate (ExtJS)

    Unanswered: HELP: Delegating Listeners to an ID in XTemplate (ExtJS)


    Oh man! This is so tough...

    Need any help that we can find here regarding Listeners + XTemplate.

    Our Goal: To delegate an 'itemtap' listener to an ID in XTemplate (i.e. div id="xplay").

    Error Received:

    Code:
        Error in event handler for 'undefined': INDEX_SIZE_ERR: DOM Exception 1 undefined event_bindings:207
        chrome.Event.dispatch event_bindings:207
        chromeHidden.Port.dispatchOnMessage miscellaneous_bindings:250
    Here's our XTemplate:

    Code:
            var itemTpl = new Ext.XTemplate(
                '<tpl for=".">',
                    '<img src="http://www.myShortenedUrl.com/{taskImgPath}" />',
                    '<img src="http://www.myShortenedUrl.com/{timeImgPath}" />',
                    '<div id="xplay">',
                        '<img src="http://www.starrbc.org/play_button.jpg" />',
                    '</div>',
                '</tpl>'
            );
    Here's our xtype:list with the XTemplate (itemTpl) binded to it.. and an itemtap listener that is delegated to "xplay"

    Code:
                    xtype: 'panel',
                    items: [{
                        xtype: 'list',
                        id: 'bookmarkView',
                        store: bookmarkStore,
                        itemTpl: itemTpl, // setting the XTemplate here
                        listeners: {
                                itemtap: function(bookmarkView, index, item, e){
                                    console.log("Hello I am Here!");
                                },
                                element: 'innerElement',
                                delegate: 'xplay'
                            }
    What We have tried:
    • We removed element: 'innerElement' and delegate: 'xplay' and it will trigger the itemtap function when we click on ANY part of the XTemplate... but that isn't our goal. We would like only our PLAY button to trigger this listener...
    Any help would be very much appreciated!

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Toronto, Canada
    Posts
    92
    Answers
    20
    Vote Rating
    12
    iSmartDevice is on a distinguished road

      0  

    Default


    I overrode the "initialize" method of the list and did listen to the tap event for the "play" button. Use the class property instead of the "id" property. Let me know if it works. Good luck!
    Code:
    itemTpl: [
        '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
        '<div>',
        '    <img class="xplay" src="http://www.starrbc.org/play_button.jpg" width="24" height="24"/>',
        '</div>'
    ].join(''),
    
    initialize: function () {
        // Initialize parent.
        this.callParent(arguments);
            
        this.element.on({
            delegate: '.xplay',
            tap: 'handlePlayButton',
            scope: this
        });
    },
    
    // apply to the selection model to maintain visual UI cues
    onItemTrigger: function(me, index, target, record, e) {
            if (!Ext.fly(e.target).hasCls('xplay') && !(this.getPreventSelectionOnDisclose() && Ext.fly(e.target).hasCls(this.getBaseCls() + '-disclosure'))) {
                this.callParent(arguments);
            }
    },
    
    handlePlayButton: function(e){
        var me = this,
        item = e.getTarget().parentNode.parentNode.parentNode, /* It depends on how deep the element is in. I'm not sure the best way to access its parent node.*/
        index = me.container.getViewItems().indexOf(item),
        record = me.getStore().getAt(index);
    
    
        console.log(me,item,index,record);
    },

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    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


    Something to be aware of also is you set yourself up for duplicate ids. iSmartDevice has solved this using the class attribute instead of id but it is important to know what you were doing.

    You have an XTemplate like:

    Code:
            var itemTpl = new Ext.XTemplate(
                '<tpl for=".">',
                    '<img src="http://www.myShortenedUrl.com/{taskImgPath}" />',
                    '<img src="http://www.myShortenedUrl.com/{timeImgPath}" />',
                    '<div id="xplay">',
                        '<img src="http://www.starrbc.org/play_button.jpg" />',
                    '</div>',
                '</tpl>'
            );
    The <tpl for="."> is telling it you want to loop through an array. If you have 5 objects in the array then you will have 5 sets of images and the div with a child image in it which is fine. The issue is you have an id on that div so if you have 5 objects in an array you are going to have 5 of those divs with the same id which is invalid basic HTML. Changing id to class will solve this.
    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.