在 ExtJS 6 中的模板列图标上设置功能

Question

我试图解决这个问题好几天了，但没有更进一步。我尝试在网格的每一行中为图标设置“关闭”（或“看到”）功能，但我没有成功。我已经尝试了所有可以在论坛或谷歌搜索中找到的公式，但显然，我一定是做错了什么。

Ext.create('Ext.grid.Panel', {
            title: 'News',
            cls: 'grid',
            id: 'myTable',
            renderTo: Ext.getBody(),
            store: Ext.data.StoreManager.lookup('News'),
            viewConfig: {
                trackOver: false,
                emptyText: '<h1 style="margin:20px">No news</h1>',
                loadMask: {
                    msg: 'Loading news, please wait...'
                }
            },
            hideHeaders: true,
            listeners: {
                afterrender: function (view, eOpts) {
                    console.log(Ext.select('.btn-seen'));
                }
            },
            columns: [{
                xtype: 'templatecolumn',
                text: 'Title',
                dataIndex: 'text',
                flex: 1,
                tpl: '<div class="text-wrapper">' +
                    '<div class="news-icon"><i class="fa fa-fw fa-{type}"></i></div>' +
                    '<div class="news-data">' +
                    '<div class="news-header">' +
                    '<i class="fa fa-calendar">&nbsp;{date}</i>' +
                    '&nbsp;&nbsp;&nbsp;' +
                    '<i class="fa fa-clock-o">&nbsp;{time}</i>' +
                    '<a class="btn-seen"><i class="header-eye fa fa-eye" data-qtip="Click to remove"></i></a>' +
                    '</div>' +
                    '<div class="news-content">{text}</div>' +
                    '</div>' +
                    '</div>'
            }]
        });

我创建了一个小提琴来测试，但是，如果我尝试代码，例如控制台中的 Ext.select('.btn-seen') 工作，只有在 chrome btw 在 firefox 中不起作用，在交换里面afterrender 事件返回一个空数组。

任何光线都会受到影响

https://fiddle.sencha.com/#view/editor&fiddle/1laj

提前致谢

Answer 1

我终于可以解决这个问题了。感谢 Sencha 论坛的用户指出正确答案。我只需要改变这个：

tpl: new Ext.XTemplate(
            '<tpl for=".">',
            '<div class="news-text-wrapper">',
            '<div class="news-icon"><i class="fa fa-fw fa-{type}"></i></div>',
            '<div class="news-data">',
            '<div class="news-header">',
            '<i class="fa fa-calendar">&nbsp;{date}</i>',
            '&nbsp;&nbsp;&nbsp;',
            '<i class="fa fa-clock-o">&nbsp;{time}</i>',
            '<i data-qtip="Clic para remover" class="header-eye fa fa-eye" id={[this.getLinkId(values.news_id)]}></i>',
            '</div>',
            '<div class="news-content">{text}</div>',
            '</div>',
            '</div>',
            '</tpl>',
            {
                getLinkId: function(news_id) {
                    Ext.defer(this.addListener, 1, this, [news_id])
                    return news_id;
                },
                addListener: function(id) {
                    Ext.get(id).on('click', function(e){
                        e.stopEvent();
                        console.log('link ' + id + ' clicked');
                        var st = Ext.data.StoreManager.lookup('News');
                        var record = st.getById(id);
                        console.log(record);
                        st.remove(record);
                    });
                }
            })

并且工作完美。 ;)