Templates 在ExtJS 6中的templatecolumn图标上设置函数

我花了好几天的时间试图解决这个问题，但没有任何进展。我试图在我的网格中的每一行设置一个图标的“关闭”（或“看见”）功能，但我没有成功。我尝试了搜索论坛或谷歌时能找到的每一个公式，但很明显，我一定是做错了什么

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.create（'Ext.grid.Panel'{
标题:"新闻",，
cls:“电网”，
id:'myTable'，
renderTo:Ext.getBody（），
存储：Ext.data.StoreManager.lookup（'News'），
视图配置：{
跟踪：错误，
emptyText:'没有新闻'，
加载掩码：{
消息：“正在加载新闻，请稍候…”
}
},
隐藏者：没错，
听众：{
afterrender:函数（视图、eOpts）{
console.log（Ext.select（'.btn-seen'）；
}
},
栏目：[{
xtype:'templatecolumn'，
文本：“标题”，
数据索引：“文本”，
弹性：1，
第三方物流：''+
'' +
'' +
'' +
“{date}”+
'   ' +
“{time}”+
"

提前感谢
我终于可以解决这个问题了。感谢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);
                    });
                }
            })

tpl:new Ext.XTemplate(
'',
'',
'',
'',
'',
“{date}”，
'   ',
“{time}”，
'',
'',
“{text}”，
'',
'',
'',
{
getLinkId:函数（新闻id）{
Ext.defer（this.addListener，1，this，[news\u id]）
返回新闻标识；
},
addListener:函数（id）{
Ext.get（id）.on（'click'，函数（e）{
e、 stopEvent（）；
log（'link'+id+'clicked'）；
var st=Ext.data.StoreManager.lookup（'News'）；
var记录=st.getById（id）；
控制台日志（记录）；
圣卢西亚（记录）；
});
}
})

很好用。；
看看这个是的，的确如此，但这会在行上添加一个单击事件，但我需要为行中的不同项目设置不同的事件。谢谢。非常好！！回答得好。