ExtJS 4.2.1 GridPanel - Показать/скрыть ссылку в колонке шаблона

Question

У меня есть столбец шаблона в моих GridPanel, содержащих URL:

{ 
     xtype: 'templatecolumn', 
     tpl: Ext.create('Ext.XTemplate', 
      '<a href="#" class="x-leave-request-edit">Edit</a>' 
     ) 
    } 

Когда пользователь наводит мышь на определенную строку в GridPanel, я хочу ссылка будет видимой:

listeners: { 
     'itemmouseenter' : function(gridpanel, record, item) { 
      var editLink = Ext.select(Ext.query('a.x-leave-request-edit', item, 'select', true)); 
      editLink.setVisible(true); 
     }, 
     'itemmouseleave' : function(gridpanel, record, item) { 
      var editLink = Ext.select(Ext.query('a.x-leave-request-edit', item, 'select', true)); 
      editLink.setVisible(false); 
     } 
    } 

Это прекрасно работает. Проблема в том, что по умолчанию я хочу, чтобы ссылки в tpl были невидимыми. Как я могу это достичь? Я попытался использовать аналогичный код, как указано выше, в onRender(), afterRender() и finishRender(), но Ext.query() всегда возвращает пустой массив.

Answer 1

Вместо всего этого query уродства, вы можете просто использовать:

item.down('.x-leave-request-edit').

Чтобы сделать его невидимым, просто добавьте display: none; в встроенный стиль.

return '<a href="#" style="display: none;" class="x-leave-request-edit">Edit</a>';