2

我正在使用 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'并且当我们单击 XTemplate 的任何部分时delegate: 'xplay'它会触发该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'
}

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

Uncaught TypeError: Object [object Object] has no method 'getTarget' 事件处理程序中的错误'undefined': INDEX_SIZE_ERR: DOM Exception 1 undefined

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

4

2 回答 2

1

你的做法是错误的。

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

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

if (e.getTarget().hasCls('myCustomCls')) {
    // do something
}
于 2012-07-08T10:21:37.953 回答
0 
listeners: {
    element: 'element',//i hope element works.
    delegate: 'div.xplay',
    event:'tap',
    fn: 'Your function here',
}

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

于 2012-11-16T13:13:02.403 回答