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

[thehappynote]

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:

    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:

        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"

                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!

[iSmartDevice]

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!

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);
},

[mitchellsimoens]

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:

        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.