Question

我的gridpanel中有一个包含网址的模板列：

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

extjs 4.2.1 GridPanel - 在模板列中显示/隐藏链接

1 个答案: