启用按钮时不显示工具提示答案

【问题标题】：Tooltip not showing when enabling a button启用按钮时不显示工具提示
【发布时间】：2020-08-04 17:29:28
【问题描述】：

从 Ext5 升级到 7.2 后，以编程方式启用按钮后不再可能看到工具提示。

Ext.define('X', {
extend: 'Ext.panel.Panel',

initComponent: function() {
    this.tbar = [{
        text: 'Foo',
        disabled: true,
        itemId: 'fooBtn',
        tooltip: 'FooTip',
        handler: function(btn){
            this.setHtml('Test')
        },
        scope: this
    },
    {
        text: 'Bar',
        tooltip: 'BarTip',
        handler: function(btn) {
            this.down('#fooBtn').enable();
        },
        scope: this
    }];
    this.callParent();
}
});

Ext.application({
name: 'Fiddle',

launch: function() {
    new X({
        renderTo: document.body,
        title: 'Foo',
        width: 200,
        height: 200
    });
 }
});

https://fiddle.sencha.com/#view/editor&fiddle/37o5

【问题讨论】：

标签： extjs extjs7

【解决方案1】：

奇怪的错误。您可以使用以下覆盖来修复它：

Ext.define('overrides.button.Button', {
    override: 'Ext.button.Button',
    
    setTooltip: function(tooltip, initial) {
        var me = this,
            targetEl = me.el;

        if (me.rendered) {
            if (!initial || !tooltip) {
                me.clearTip();
            }
 
            if (tooltip) {
                if (Ext.quickTipsActive && Ext.isObject(tooltip)) {
                    Ext.tip.QuickTipManager.register(Ext.apply({
                        target: targetEl.id
                    }, tooltip));
 
                    me.tooltip = tooltip;
                }
                else {
                    targetEl.dom.setAttribute(me.getTipAttr(), tooltip);
                }
 
                me.currentTooltipEl = targetEl;
            }
        }
        else {
            me.tooltip = tooltip;
        }
 
        return me;
    }
});

【讨论】：

不确定这是否能解决核心问题。这是因为如果您调用 enable() 它仍然处于禁用状态（它在设置工具提示后启用）。在禁用状态下，tooltipEl 不是对象本身，而是嵌套并通过 css 设置为显示块。但是，由于它是在之后启用的，所以工具提示是不显示的。那里的代码确实值得怀疑。我目前只是在启用（）之后再次调用 setTooltip。也不是最好的方法，但它也很有效。我有点想将其创建为错误报告，因为论坛有点过时/帖子在那里被删除。非常感谢
你是对的，这不是最好的解决方案，代码也有问题。但是在每次启用/禁用时调用 setTooltip 方法并不是最好的解决方案，因为它违反了 DRY 原则。 AFAIK 错误在 targetEl 变量中，它由于某种原因而改变。

【解决方案2】：

您可以尝试启用后添加一行：

handler: function(btn) {
            this.down('#fooBtn').enable();
    ******this.down('#fooBtn').setTooltip("FooTip");*****
        },

可能是一个糟糕的解决方案，但需要的代码更少。

【讨论】：