有没有其他方法可以将 "Close Tooltip" 放置到 extjs 面板 header 中的默认关闭按钮？

Question

我正在为我的项目使用 extjs。每个面板的右上角都有一个默认的关闭按钮。我可以使用按钮的位置为按钮添加工具提示。

function closeTooltip (window, 1) {
    Ext.create('Ext.tip.ToolTip', {
        target: window.header.items.get(1).el,
        html: 'Close'
      });

但是，这不是很酷，因为如果我向 header 添加一个按钮，则关闭按钮的位置会从 1 变为 2。因此，工具提示会显示新添加的按钮按钮。

是否有任何其他方法可以使关闭工具提示保持不变以关闭按钮？

Answer 1

要获取 close 按钮，您可以使用 down method of Ext.dom.Element。

down 方法根据传递的 CSS 选择器（选择器不应包含 id）选择该元素下方任意深度的单个子元素。

在此FIDDLE中，我使用panel创建了一个演示。我已经在 ExtJS 4.x 和更高版本中进行了测试，它工作正常。我希望这会 help/guide 你达到你的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        function closeTooltip(panel) {
            if (Ext.getVersion().major > 5) {
                Ext.getCmp(panel.el.down('.x-tool-close').up().id).setTooltip('close')
            } else {
                Ext.create('Ext.tip.ToolTip', {
                    target: panel.el.down('.x-tool-close').id,
                    html: ' Close '
                    //If you want to put diffrent-diffrent tooll tip then you can use below
                    //html:`Close ${panel.title}`
                });
            }
        }

        Ext.define('CustomPanel', {
            extend: 'Ext.panel.Panel',
            width: 200,
            bodyPadding: 10,
            margin: 5,
            html: 'Custom panel used',
            closable: true,
            tools: [{
                type: 'help',
                handler: function () {
                    alert('help');
                }
            }],
            listeners: {
                afterrender: closeTooltip
            }
        });

        Ext.create('CustomPanel', {
            title: 'Panel 1',
            renderTo: Ext.getBody()
        });

        Ext.create('CustomPanel', {
            title: 'Panel 2',
            renderTo: Ext.getBody()
        });

        Ext.create('CustomPanel', {
            title: 'Panel 3',
            renderTo: Ext.getBody()
        });

        Ext.create('CustomPanel', {
            title: 'Panel 4',
            renderTo: Ext.getBody()
        });
        Ext.create('CustomPanel', {
            title: 'Panel 4',
            renderTo: Ext.getBody()
        });
    }
});

有没有其他方法可以将 "Close Tooltip" 放置到 extjs 面板 header 中的默认关闭按钮？

Is there any other way to place "Close Tooltip" to default close button in the panel header in extjs?

javascript

extjs

extjs4.1

extjs4.2

extjs5