extjs 4.2.1 GridPanel - Show/Hide link in template column

Question

I have a template column in my gridpanel containing a URL:

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

When a user mouses over a particular row in the gridpanel, I want the link to be visible:

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);
    }
}

This works fine. The problem though is that by default, I want the links in the tpl to be invisible.

How can I achieve this?

I tried using similar code as above in onRender(), afterRender() and finishRender() but the Ext.query() always returns an empty array.

Answer 1

Instead of all that query ugliness, you can just use:

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

To make it not visible the initially, just add display: none; in the inline style.

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