将侦听器委派给 XTemplate (ExtJS) 中的 ID

Question

我正在使用侦听器 + XTemplate。

我们的目标是将"itemtap"侦听器委托给XTemplate中的ID（即div id="xplay"）。

收到的错误：

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

这是我们的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>'
);

下面是我们的 xtype： 列表，其中绑定了 XTemplate （itemTpl），以及委托给 "xplay" 的 itemtap 侦听器：

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'
    }

我们删除了element: 'innerElement'和delegate: 'xplay'，当我们点击 XTemplate 的任何部分时，它会触发 itemtap 功能，但这不是我们的目标。我们只希望我们的 PLAY 按钮触发此侦听器。

更新

感谢埃文的快速回复。

这是我对您的输入尝试的内容 - 如果我做错了，请告诉我。

将div id 更改为div 类。

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>'
);

我添加了对事件对象的检查，注释了元素和委托的代码（将这些代码留在那里不起作用）。

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'
}

但是，我们遇到了这个问题：

未捕获的类型错误：对象 [对象对象] 没有方法"getTarget" "未定义"的事件处理程序中的错误：INDEX_SIZE_ERR：DOM 异常 1 未定义

我们

很困惑，这是否意味着我们没有得到事件对象？还是我们错误地解释了您的解释？

Answer 1

你走

错了路。

1）ID应该是唯一的，你不能一遍又一遍地重复id，每个元素必须有一个。相反，请为元素指定一个类名。

2） 像您一直在做的那样侦听 itemtap 事件，然后检查事件对象以查看它是否与您的委托匹配：

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

Answer 2

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

这就是侦听器应该如何满足您的要求。