在ExtJS 6的templatecolumn圖標上設置函數

我試圖解決這個問題好幾天了，而且還沒有接近。我嘗試在網格的每一行中爲圖標設置一個「關閉」（或「看到」）函數，但我沒有成功。我嘗試了所有可以搜索論壇或谷歌的公式，但顯然，我一定做錯了什麼。在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.select（「 BTN-看到」）在控制檯的作品，只是在鍍鉻順便說一句，在Firefox不起作用，在afterrender事件中交換返回一個空數組。

任何光線會aprecciate

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

在此先感謝

來源

2016-11-29 Héctor Sandoval O.

看看這個http://stackoverflow.com/questions/28076122/how-to-attach-onclick-event-to-xtemplate-element-extjs – UDID

是的，的確，但增加一個點擊事件上該行，但我需要在行內的不同項目diferents事件。謝謝任何方式 –

最後，我可以解決這個問題。感謝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); 
        }); 
       } 
      })

和作品完美。 ;）

來源

2016-11-30 16:49:08

優秀！好答案。 – UDID

在ExtJS 6的templatecolumn圖標上設置函數

回答

相關問題