如何将 onclick 事件附加到 XTemplate 元素 extjs？答案

【问题标题】：how to attach onclick event to XTemplate element extjs?如何将 onclick 事件附加到 XTemplate 元素 extjs？
【发布时间】：2015-01-21 20:20:54
【问题描述】：

我对 extjs 很陌生。单击 div 后，我想调用 onclick 事件，下面是代码。

请帮忙，在此先感谢。

var resultTemplate = new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="list-item" id={value}>',
    '<i class="folder-icon">&nbsp;</i>',
    '{value}',
    '</div>',
    '</tpl>'
);


Ext.define('abc.view.xyz', {
    layout: {
        type: 'border',
        padding: 5
    },
    extend: 'Ext.Panel',
    alias: 'widget.infraTab',
    id: 'infraTab',
    margin: '10 10 10 10',
    border: true,
    items: Ext.create('Ext.view.View', {
        store: store,
        tpl: resultTemplate
    })
});

我想要点击类 "list-item" 的 div 及其 id 的值。

【问题讨论】：

标签： javascript extjs extjs4.2

【解决方案1】：

您应该可以使用 itemclick 监听器：

Ext.create('Ext.view.View', {
     store: store,
     tpl: resultTemplate,
     itemSelector: '.list-item',
     listeners: {
         itemclick: function(view, record, item, index, e, eOpts) {
             alert(record.get('value'));
         }
     }
});

这是一个Sencha Fiddle 演示它的用法。

【讨论】：

不错，这个也有问题。 +1

【解决方案2】：

如果您不使用View，则 itemSelector 不可用，在这种情况下，您可以执行以下操作：

afterRender: function () {
        this.callParent(arguments);

        this.el.select('.item', true)
            .elements
            .forEach((item) =>
                item.on('click', (e, element) => {
                        this.fireEvent('itemclick');
                    }
                )
            );
    }

【讨论】：