[CLOSED][3.0rc1] formField -> markInvalid -> target:side -> displaying errors

[tobiu]

hi together,

like in my posting http://extjs.com/forum/showthread.php?p=320104#post320104
this bug is also still in the 3.0-rc1.

since the code is a bit different, i post the way to fix it here too.

Ext.form.Field


'side' : {
mark: function(field, msg){
field.el.addClass(field.invalidClass);
if(!field.errorIcon){
var elp = field.getErrorCt();
if(!elp){ // field has no container el
field.el.dom.title = msg;
return;
}
field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
field.on('resize', field.alignErrorIcon, field); // inserted here
}
field.alignErrorIcon();
field.errorIcon.dom.qtip = msg;
field.errorIcon.dom.qclass = 'x-form-invalid-tip';
field.errorIcon.show();
// field.on('resize', field.alignErrorIcon, field); // removed
},
clear: function(field){
field.el.removeClass(field.invalidClass);
if(field.errorIcon){
field.errorIcon.dom.qtip = '';
field.errorIcon.hide();
// field.un('resize', field.alignErrorIcon, field); // removed
}else{
field.el.dom.title = '';
}
}
}


if you use

field.errorIcon.destroy();
instead of hiding it, removing the listener would be ok.
when hiding the icon and removing the listener and then resizing the window to a smaller width (containing a field that was marked and the mark got hidden), it will get scrollbars. tested only in ff3.

for screens, look at the 2.2.1 posting.

kind regards, tobiu

[mjlecomte]

Hi, Could you try this with the latest build at your disposal? I've checked your provided sample against the latest build, with FF3 and the issue appears to be resolved.

[tobiu]

Hi MJ,

i have tested it again with Ext3.0-rc2 and the bug is still there in Ext.form.Field.
To be more precise, markInvalid and clearInvalid have changed, but:



Ext.form.MessageTargets = {
...
'side' : {
mark: function(field, msg){
field.el.addClass(field.invalidClass);
if(!field.errorIcon){
var elp = field.getErrorCt();
if(!elp){ // field has no container el
field.el.dom.title = msg;
return;
}
field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
}
field.alignErrorIcon();
field.errorIcon.dom.qtip = msg;
field.errorIcon.dom.qclass = 'x-form-invalid-tip';
field.errorIcon.show();
field.on('resize', field.alignErrorIcon, field);
},
clear: function(field){
field.el.removeClass(field.invalidClass);
if(field.errorIcon){
field.errorIcon.dom.qtip = '';
field.errorIcon.hide();
field.un('resize', field.alignErrorIcon, field);
}else{
field.el.dom.title = '';
}
}
}
};


the problem keeps the same:
enter something invalid into a field (or focus and blur a field that may not be empty). then enter something valid into that field, so that the errorIcon gets the style display:none. then resize the width of the form smaller (in my usecase, the form is inside of a window) and the formField still will get a scrollbar.

though Condor and i have a different opinion on this, i strongly recommend to not remove the listener for the alignErrorIcon-method and only set that one on creation.

kind regards, tobiu

[mjlecomte]

I tested your example against RC1. Upon resizing the window I saw the scrollbars etc.

I tested your example against today's svn version and could not see the same behavior, there was no problem. I did see scrollbars if I reduced the width too small, but that appears to be a configuration issue (the width of the window should have a min width setting)