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 ugliness，你可以使用：

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

要使其最初不可见，只需在内联样式中添加display: none;。

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