PDA

View Full Version : set Button tooltip based on Enabled/Disabled state



ypandey
21 Aug 2013, 4:07 AM
Hello guys, Is there any good way of having different tooltip for a button based on it enable/disable state?
I am looking for options :)

Zinnia
21 Aug 2013, 6:30 AM
Check the below code, this may help you

Ext.QuickTips.init();
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
listeners: {
render: function(btn) {
if(btn.isDisabled() == false){
btn.setTooltip('Enable button');
}
},
disable: function(btn) {
btn.setTooltip('Disable button');
},
click: function(btn) {
btn.disable();
}
}
});

aaugen
22 Aug 2013, 1:20 AM
Hi,

One possibility is to extend Ext.button.Button and do work on setTooltip function like this:


Ext.define('Cx.view.MyButton', {
extend : 'Ext.button.Button',
xtype : 'mybutton',

text : 'MyButton',
tooltip : 'init tooltip',
disabled : true,

setTooltip : function(tooltip, initial) {
tooltip = this.disabled ? 'tooltip disabled' : 'tooltip';
this.callParent([tooltip, initial]);
}
});

ypandey
22 Aug 2013, 2:14 AM
Thanks I will try this, but I don't think it's going to change tooltip automatically on enabling/disabling the button.

aaugen
22 Aug 2013, 4:19 AM
Hi,

You can try to do the same thing on setDisabled function if it's more appropriate:


setDisabled : function(disabled) {
this.setTooltip(disabled ? 'tooltip disabled' : 'tooltip');
this.callParent(arguments);
}

ypandey
22 Aug 2013, 4:23 AM
hmm, yeah overriding setDisabled & setEnabled methods would be more appropriate.. Thanks :)

aaugen
22 Aug 2013, 4:38 AM
Sorry i made a mistake, appropriate functions to override is enable(silent) and disable(silent) because setDisabled uses internally these two previously methods.
setEnabled function does not exist.