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