PDA

View Full Version : may tooltip of a button change?



dominatemind
23 Feb 2009, 6:17 PM
i know iconCls of a button can be changed by setIconClass(string), is there any way to reset a tooltip like this?
thx.

mjlecomte
23 Feb 2009, 7:10 PM
There's a setTooltip() method in Ext3.

shibubh
23 Feb 2009, 8:42 PM
i think this code help you.



Ext.ux.Buton = Ext.extend(Ext.Button,{
setToolTip:function(tooltip){
var btnEl=this.el.child(this.buttonSelector);
if(tooltip){
if(typeof tooltip == 'object'){
Ext.QuickTips.register(Ext.apply({
target: btnEl.id
},tooltip));
} else {
btnEl.dom[this.tooltipType] = tooltip;
}
}
}


});

dominatemind
24 Feb 2009, 12:55 AM
@mjlecomte
my premium id can not get through the svn(i don't know why...), is there another way to take a look at Ext3 now?
@shibubh
nice code.Thank u for ur help.

mjlecomte
24 Feb 2009, 5:47 AM
AFAIK you need subscription to download from svn.

dominatemind
24 Feb 2009, 6:59 PM
@shibubh

i found tooltip still enable after button is disabled,so i add a listener to destroy it.
however, if the button's enabled soon ,this tooltip can not show as before.maybe you can kindly help me.


Ext.ux.Button = Ext.extend(Ext.Button, {
setToolTip: function(tooltip) {
var btnEl = this.el.child(this.buttonSelector);
if (tooltip) {
if (typeof tooltip == 'object') {
Ext.QuickTips.register(Ext.apply({
target: btnEl.id
}, tooltip));
} else {
btnEl.dom[this.tooltipType] = tooltip;
}
}
},
listeners: {
//no a way nice enough
disable: function() {
var btnEl = this.el.child(this.buttonSelector);
if (btnEl.dom[this.tooltipType] != null) {
btnEl.dom[this.tooltipType] = null;
}
}
}
});
and then , i meet another problem: as adding a listener in this way ,if i add one again in an instance,this default listener will not be usable:


Ext.reg('uxbutton', Ext.ux.Button);
//an instance:
{
id: 'buttonNext',
xtype: 'uxbutton',
iconCls: 'page-next-disabled-icon',
text: 'Nextpage',
disabled: true,
listeners: {
disable: function() {
this.setIconClass('page-next-disabled-icon');
},
enable: function() {
this.setIconClass('page-next-icon');
}
}
}

shibubh
24 Feb 2009, 8:59 PM
@ dominatemind
try this one.


Ext.ux.Button = Ext.extend(Ext.Button,{
setToolTip:function(tooltip){
var btnEl=this.el.child(this.buttonSelector);
if(tooltip){
if(typeof tooltip == 'object'){
Ext.QuickTips.register(Ext.apply({
target: btnEl.id
},tooltip));
} else {
btnEl.dom[this.tooltipType] = tooltip;
}
}
this.toolTip = tooltip;
},
onDisable:function(){
Ext.ux.Button.superclass.onDisable.apply(this,arguments);
var btnEl = this.el.child(this.buttonSelector);
if(this.toolTip){
if(typeof this.toolTip == 'object'){
Ext.QuickTips.unregister(btnEl.id);
} else {
btnEl.dom[this.tooltipType] = null;
}
}
},
onEnable:function(){
Ext.ux.Button.superclass.onEnable.apply(this,arguments);
if(this.toolTip)
{
this.setToolTip(this.toolTip)
}
}
});



and what happen to your code is you override your disable listeners so the first one is not working

dominatemind
24 Feb 2009, 10:49 PM
does not work.... i debugged this code in firebug,found 'toolTip' is not a member of button (this) when onDisable() is fired and...

shibubh
24 Feb 2009, 11:20 PM
@ dominatemind
this is working code



Ext.ux.Button = Ext.extend(Ext.Button,{
setToolTip:function(tooltip){
var btnEl=this.el.child(this.buttonSelector);
if(tooltip){
if(typeof tooltip == 'object'){
Ext.QuickTips.register(Ext.apply({
target: btnEl.id
},tooltip));
} else {
btnEl.dom[this.tooltipType] = tooltip;
}
}
this.tooltip= tooltip;
},
onDisable:function(){
Ext.ux.Button.superclass.onDisable.apply(this,arguments);
var btnEl = this.el.child(this.buttonSelector);
if(this.toolTip){
if(typeof this.toolTip == 'object'){
Ext.QuickTips.unregister(btnEl.id);
} else {
btnEl.dom[this.tooltipType] = null;
}
}
},
onEnable:function(){
Ext.ux.Button.superclass.onEnable.apply(this,arguments);
if(this.tooltip)
{
this.setToolTip(this.tooltip)
}
}
});



ok its because of this.toolTip
this.tooltip is the right config option // all lower case

dominatemind
24 Feb 2009, 11:30 PM
maybe onEnble() works nice...but i can't see the effect as onDisable() doesn't work..as i said above, in onDisable(), this.tooltip and this.tooTip both are undefined.

and also i find, as a button created, Ext.QuickTips.getQuickTip(btnEl.id) can find it before we 'manually' register. what's more, Ext.QuickTips.getQuickTip(btnEl.id) has a function disable(),so i try to use this.
however, failed....it doesn't work.

Ext.ux.Button = Ext.extend(Ext.Button, {
setToolTip: function(tooltip) {
var btnEl = this.el.child(this.buttonSelector);
if (tooltip) {
if (typeof tooltip == 'object') {
Ext.QuickTips.register(Ext.apply({
target: btnEl.id
}, tooltip));
}
else {
btnEl.dom[this.tooltipType] = tooltip;
}
}
},
onDisable:function(){
Ext.ux.Button.superclass.onDisable.apply(this,arguments);
var btnEl = this.el.child(this.buttonSelector);
if (Ext.QuickTips.getQuickTip(btnEl.id)) {
Ext.QuickTips.getQuickTip(btnEl.id).disable();//it doesn't work....
}
},
onEnable:function(){
Ext.ux.Button.superclass.onEnable.apply(this, arguments);
var btnEl = this.el.child(this.buttonSelector);
if (Ext.QuickTips.getQuickTip(btnEl.id)) {
Ext.QuickTips.getQuickTip(btnEl.id).enable();
}
}
});

shibubh
24 Feb 2009, 11:44 PM
@ dominatemind
i think you forget to put this statement this.tooltip= tooltip;
in setToolTip() function





setToolTip:function(tooltip){

var btnEl=this.el.child(this.buttonSelector);

if(tooltip){

if(typeof tooltip == 'object'){

Ext.QuickTips.register(Ext.apply({

target: btnEl.id

},tooltip));

} else {

btnEl.dom[this.tooltipType] = tooltip;

}

}
this.tooltip= tooltip;


},