Question

我正在使用Listeners + 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按钮触发此监听器。

更新

感谢Evan的快速反应。

这是我尝试输入的内容 - 让我知道我是否做错了。

将div id更改为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>'
);

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

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

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

未捕获TypeError：对象[object Object]没有方法'getTarget' 'undefined'的事件处理程序出错：INDEX_SIZE_ERR：DOM异常 1未定义

我们很困惑，这是否意味着我们没有获得Event对象？或者我们是否错误地解释了您的解释？

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

这就是听众应该如何满足你的要求。

将侦听器委派给XTemplate中的ID（ExtJS）

更新

2 个答案: