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.
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>';