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

Question

I am using extjs for my project. There is a default close button on the upper right side for every panel. I am able to put tooltip for the button using its position.

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

But, this isn't so cool because, if I add a button to the header then the position of the close button changes from 1 to 2. So, the tooltip gets displayed for the newly added button.

Is there any other way to keep close tooltip to close button that remains same ?

Answer 1

For getting your close button, you can use down method of Ext.dom.Element .

The down method selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).

In this FIDDLE , I have created a demo using panel . I have tested in ExtJS 4.x and later versions, it's working fine. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

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()
        });
    }
});