在Extjs 6中的TemplateColumn图标上设置功能

Question

我试图解决此问题几天，而不会更接近。我尝试将"关闭"（或"看到"）函数设置为我网格的每一行中的图标，但我没有成功。我尝试了所有可以找到搜索论坛或Google的公式我一定做错了。

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'），仅在Firefox中的Chrome btw中不起作用，以交换后备件返回一个空数组。

任何灯都会被重新分配

https://fiddle.sencha.com/#view/editor＆amp; 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);
                    });
                }
            })

并且完美地工作。;）