Results 1 to 10 of 10

Thread: Layout bug with form fields and msgTarget: 'side'

    This duplicates another bug already reported in our system: EXTJS-15134
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    144

    Default Layout bug with form fields and msgTarget: 'side'

    Hi
    Looks like there is a layout bug with msgTarget: 'side'.

    With Ext JS 4.2.x form fields with msgTarget: 'side' have the same width as fields without msgTarget.
    And only if there is an error the field gets smaller and makes room for the error indication icon.
    http://docs.sencha.com/extjs/4.2.2/#...rect-form.html

    With Ext JS 5.x the field with msgTarget is now smaller from the beginning.
    http://dev.sencha.com/ext/5.0.0/examples/direct/direct-form.html

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    Thanks for the post, this issue is already fixed in the latest nightly.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    144

    Default

    Hi.

    Looks like this is not fixed. If you look at the 5.0.1 Direct Form example the email field is still smaller than the others: http://dev.sencha.com/ext/5.0.1/exam...rect-form.html

    Ralph

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    144

    Default

    Hi

    Just figured out that this problem only occurs when the application uses ext-all.js or a sencha cmd build version. With ext-all-debug.js everything works fine. This problem still exists in 5.0.2.1309. This happens with all fields that have msgTarget: 'side' and a validator like allowBlank: false or vtype: '...'.

    Ralph

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    144

    Default

    Here are two pages that demonstrates the problem.

    ext-all.js: http://rasc.ch/ext-all.js.html
    ext-all-debug.js : http://rasc.ch/ext-all-debug.js.html

    Looks like one of the culprit is the call to form.isValid().
    The last example with the fieldcontainer does not contain a validator so it must be a different problem.

    The examples link to ext 5.0.1 but the problem still exists with the latest 5.0.2 nightly (ext-5.0.2.1323).

    A bit scary that ext-all.js and ext-all-debug.js behave differently.

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    144

    Default

    I found this difference.
    ext-all.js sets the style of the errorWrap div to 'visibility:hidden'.
    ext-all-debug.js hides the element with 'display: none;'

    ext-all.js

    Code:
    <div id="textfield-1011-errorWrapEl" data-ref="errorWrapEl" class="x-form-error-wrap x-form-error-wrap-default x-form-error-wrap-side" style="visibility: hidden;">
    <div role="alert" aria-live="polite" id="textfield-1011-errorEl" data-ref="errorEl" class="x-form-error-msg x-form-invalid-icon x-form-invalid-icon-default" data-anchortarget="textfield-1011-inputEl"></div>
    </div>

    ext-all-debug.js

    Code:
    <div id="textfield-1011-errorWrapEl" data-ref="errorWrapEl" class="x-form-error-wrap x-form-error-wrap-default x-form-error-wrap-side" style="display: none;">
    <div role="alert" aria-live="polite" id="textfield-1011-errorEl" data-ref="errorEl" class="x-form-error-msg x-form-invalid-icon x-form-invalid-icon-default" data-anchortarget="textfield-1011-inputEl">
    </div>
    </div>
    The code that writes this style is located in src/form/Labelable.js line 658-659
    Code:
     errorWrapStyle: (sideError && !autoFitErrors) ?
                        'visibility:hidden' : 'display:none',

  7. #7

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    144

    Default

    I needed a solution for this. So I dug deeper and created the following override that solves the problem for my application.

    The problem is that with ext-all-debug.js the visiblityMode of the errorWrapEl is set to {visibilityMode: 2}.
    With ext-all.js the visbilityMode of the errorWrapEl is not set (errorWrapEl.getData() returns {}).
    The function setVisibility() hides the element depending on this mode. Because it's not set in ext-all.js it uses visibility:hidden.

    Call Stack: isValid()->unsetActiveError()->hide()->setVisibility()

    The workaround simply sets the visiblityMode before calling hide()

    Code:
    Ext.define('MyApp.overrides.form.field.Base', {
        override: 'Ext.form.field.Base',
    
    
        unsetActiveError: function() {
            var me = this, 
                     errorWrapEl = me.errorWrapEl, 
                     msgTarget = me.msgTarget, 
                     targetEl;
    
    
            delete me.activeError;
            delete me.activeErrors;
            me.renderActiveError();
    
    
            if (me.rendered) {
                if (msgTarget === 'qtip') {
                    me.getActionEl().dom.removeAttribute('data-errorqtip');
                }
                else if (msgTarget === 'title') {
                    me.getActionEl().dom.removeAttribute('title');
                }
    
    
                if (!me.msgTargets[msgTarget]) {
                    targetEl = Ext.get(msgTarget);
    
    
                    if (targetEl) {
                        targetEl.dom.innerHTML = '';
                    }
                }
    
    
                if (errorWrapEl) {
                    // START BUGFIX
                    errorWrapEl.setVisibilityMode((me.msgTarget === 'side' && !me.autoFitErrors) ? Ext.Element.VISIBILITY : Ext.Element.DISPLAY);
                    // END BUGFIX
    
    
                    errorWrapEl.hide();
                    if (msgTarget === 'side' && me.autoFitErrors) {
                        me.labelEl.removeCls(me.topLabelSideErrorCls);
                    }
                    me.updateLayout();
                }
            }
        }
    
    
    });

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2014
    Posts
    9

    Default

    Thank you for the fix, ralscha!

  10. #10
    Sencha User
    Join Date
    Mar 2010
    Location
    Nowhere
    Posts
    2

    Default

    They have fixed I guess. Use autoFitErrors : false

Tags for this Thread

Posting Permissions

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