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