Results 1 to 4 of 4

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751
    Vote Rating
    129
      0  

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

    hi together,

    like in my posting http://extjs.com/forum/showthread.ph...104#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
    Code:
        '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
    Code:
    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

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    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.

  3. #3
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751
    Vote Rating
    129
      0  

    Default

    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:

    Code:
    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

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    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)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •