CODEWITHSUNDEEP
delegatesextjslistener
user1508876
user1508876

Reputation: 21

Delegating Listeners to an ID in XTemplate (ExtJS)

I am working with Listeners + XTemplate.

Our goal is 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'
    }

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.

Update

Thanks Evan for the quick response.

Here's what I tried with your inputs - let me know if I'm doing it wrongly.

Changed div id to div class.

var itemTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<img src="http://www.myShortenedUrl.com/{taskImgPath}" />',
        '<div class="xplay">',
            '<img src="http://src.sencha.io/200/http://www.starrbc.org/play_button.jpg" />',
        '</div><br/>',
    '</tpl>'
);

I added the check for the event object, commented the codes away for element and delegate (leaving these there won't work).

listeners: {
    itemtap: function(bookmarkView, index, item, e) {
                console.log("Hello I am Here!");

                if (e.getTarget().hasCls('xplay')) {
                    console.log('hasCls: xplay');
                }
            } //,
    // element: 'innerElement',
    // delegate: 'xplay'
}

However, we encountered this problem:

Uncaught TypeError: Object [object Object] has no method 'getTarget' Error in event handler for 'undefined': INDEX_SIZE_ERR: DOM Exception 1 undefined

We're confused, does that mean we're not getting an Event object? Or have we interpreted your explanation wrongly?

Upvotes: 2

Views: 2887

Answers (2)

surendran
surendran

Reputation: 476

listeners: {
    element: 'element',//i hope element works.
    delegate: 'div.xplay',
    event:'tap',
    fn: 'Your function here',
}

This is how the listener should be for your requirement.

Upvotes: 0

Evan Trimboli
Evan Trimboli

Reputation: 30092

You're going about it the wrong way.

1) ID's should be unique, you can't repeat the id over and over, there has to be one per element. Instead, give the element a class name.

2) Listen to the itemtap event as you have been doing, then check the event object to see if it matches your delegate:

if (e.getTarget().hasCls('myCustomCls')) {
    // do something
}

Upvotes: 1

Related Questions