PDA

View Full Version : Field state valid -> invalid -> valid - doesnt remove qtip invalidClass



jamie.nicholson
29 Nov 2010, 9:57 AM
Ext version tested:

Ext 3.3 rev beta


Adapter used:

ext
yui
jquery
prototype



Browser versions tested against:

Chrome
FF3 (firebug 1.3.0.10 installed)


Operating System:

Ubuntu Lucid


Description:

When using a field qtip to display a custom message if that field has been invalid but is now valid the invalid class isn't cleared correctly and the custom message looks like an error with exclamation mark and red border line.


Test Case:

Apply this configuration to combo, works with other fields too,



Ext.apply(this,{
allowBlank:false,
listeners:{
scope:this,
valid:function(c){
//c.el.dom.qclass = ''; WORKAROUND clear the class manually
c.el.set({qtip:c.getRawValue()});
},
invalid:function(c){
c.el.set({qtip:''});
},
},
});






Steps to reproduce the problem:

ensure field is blank and is invalid state
enter in some information making the field valid
hover over field to produce qtip


The result that was expected:

qtip would display in normal nice blue box


The result that occurs instead:

qtip displays in validation error box with exclamation mark and red outline


Possible fix:





Ext.form.MessageTargets = {
'qtip' : {
...
clear: function(field){
field.el.removeClass(field.invalidClass);
field.el.dom.qtip = '';
}
},

changed to
Ext.form.MessageTargets = {
'qtip' : {
...
clear: function(field){
field.el.removeClass(field.invalidClass);
field.el.dom.qtip = '';
field.el.dom.qClass ='';
}
},

Condor
29 Nov 2010, 11:13 AM
I agree with you, but I also have to say that you shouldn't be mixing qtip tips and qtip error messages on the same element.