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

Posted 2023-02-22

【中文标题】将侦听器委托给 XTemplate (ExtJS) 中的 ID

【英文标题】：Delegating Listeners to an ID in XTemplate (ExtJS)

【发布时间】：2012-07-07 17:49:45

【问题描述】：

我正在使用 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 类。

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' “未定义”的事件处理程序中的错误：INDEX_SIZE_ERR：DOM 异常 1 个未定义

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

【参考方案1】：

你走错路了。

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

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

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

【参考方案2】：

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

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