[4.1] Form field with incorrect width on validation, if msgTarget: 'side'

**jmaia** · 4 May 2012 6:22 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1

Browser versions tested against:

IE9
Firefox 12
Chrome (latest)

DOCTYPE tested against:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Description:

After upgrading to ExtJS 4.1 from 4.0.7 my form fields' size shrinks when they are considered invalid, if I have msgTarget: 'side'.

Steps to reproduce the problem:

Create a formpanel with some fields where the field defaults have msgTarget: 'side' and anchor: '100%', and at least one field has allowBlank: false
Run the form and tab to the field with allowBlank: false
Tab out of the field with allowBlank: false, without filling in any value, to trigger field validation

The result that was expected:

The field would be considered invalid and an exclamation icon would be displayed on the right side of the field. Field size (width) should shrink but just enough to accomodate for the icon

The result that occurs instead:

Field size shrinks to a lot smaller than necessary to accomodate for the icon. When valid input is filled in the field, the field is not considered invalid anymore and returns to normal width

Test Case:

On my case, it happens with a panel that has the following configuration:

Code:

{
    xtype        :'form',
    bodyPadding  :10,
    frameHeader  :false,
    fieldDefaults:{
        labelWidth   :125,
        padding      :'3 0 3 0',
        msgTarget    :'side',
        allowBlank   :false,
        selectOnFocus:true,
        anchor       :'100%',
        labelAlign   :'top'
    },    

    items:[        
        {
            // new password field
            xtype     :'textfield',
            id        :'new-password',
            name      :'newPassword',
            fieldLabel:'New Password',
            inputType :'password',
            blankText :'This field is required'
        },
        {
            // confirm password field
            xtype           :'textfield',
            name            :'confirmPassword',
            fieldLabel      :'Confirm Password',
            inputType       :'password',
            blankText       :'This field is required',
            vtype           :'password',
            initialPassField:'new-password' // id of the initial password field
        }
    ]
}

HELPFUL INFORMATION

Screenshot or Video:

not provided

See this URL for live test case:

not provided

Debugging already done:

Tested on IE9, Firefox 12 and Chrome 18, on a Windows 7 Professional (64). Bug happens on IE9 and Firefox. Does not happen on Chrome.

Possible fix:

WORKAROUND: remove the msgTarget: 'side' and the field remains the same size on validation (although the icon is not shown, which is correct)

Additional CSS used:

only default ext-all.css

Operating System:

Windows 7 Professional (64)

**evant** · 5 May 2012 8:54 PM

Could you please post a full test case? It's important to see the nesting (if any) for your form.

**jmaia** · 7 May 2012 1:31 AM

Here it goes, I hope this is enough.

Code:

<html>
<head>
    <title>The mysterious case of the Shrinking Fields</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ext-4/resources/css/ext-all.css" type="text/css">        
    <script type="text/javascript" src="ext-4/ext-all-debug.js"></script>            
    <script type="text/javascript">
        Ext.Loader.setConfig({
            enabled: true,


            paths: {
                'Ext.ux': 'app/extensions',
                'Smartdocs': 'app',
                'Smartdocs.generic': 'app/generic',
                'Smartdocs.ux': 'app/generic/extensions'
            }
        });


        Ext.onReady(function () {
            Ext.require('Ext.*');


            Ext.widget('form', {
                title: 'The mysterious case of the Shrinking Fields',
                renderTo: 'test',
                width: 400,
                height: 150,                
                bodyPadding: 10,
                frameHeader: false,
                fieldDefaults: {
                    labelWidth: 125,
                    padding: '3 0 3 0',
                    msgTarget: 'side',
                    allowBlank: false,
                    selectOnFocus: true,
                    anchor: '100%',
                    labelAlign: 'top'
                },


                items: [
                {
                    // new password field
                    xtype: 'textfield',
                    id: 'new-password',
                    name: 'newPassword',
                    fieldLabel: 'New Password',
                    inputType: 'password',
                    blankText: 'This field is required'
                },
                {
                    // confirm password field
                    xtype: 'textfield',
                    name: 'confirmPassword',
                    fieldLabel: 'Confirm Password',
                    inputType: 'password',
                    blankText: 'This field is required',
                    vtype: 'password',
                    initialPassField: 'new-password' // id of the initial password field
                }]
            })
        });
    </script>
</head>
<body>
<div id='test'></div>
</body>
</html>

Regards,

Joao Maia

**evant** · 7 May 2012 3:07 AM

I'm not sure I follow. I ran your test case and it displays the error:

http://screencast.com/t/bMRx9YE3Tt4

**jmaia** · 7 May 2012 3:13 AM

Evan,

It seems to me that you tested it on Chrome (at least the screen cast you sent has the Chrome address bar). I mentioned that the error did not happen on Chrome, but on IE9 and Firefox. Check the following line under "debugging already done" on the error report.

"Tested on IE9, Firefox 12 and Chrome 18, on a Windows 7 Professional (64). Bug happens on IE9 and Firefox. Does not happen on Chrome."

Regards,

Joao Maia

**c2c-bacardi** · 15 May 2012 10:59 AM

We ran into this very same issue when upgrading to 4.1 from 4.0.7. It only happens with 'top' aligned labels. To work around this issue, I've placed an override on Ext.form.field.Base where I modify labelableRenderTpl with the following changes in red:

Code:

Ext.define('Ext.overrides.form.field.Base',{
    override: 'Ext.form.field.Base',


labelableRenderTpl: [

        // Top TR if labelAlign =='top'
        '<tpl if="labelAlign==\'top\'">',
            '<tr>',
                '<td id="{id}-labelCell" colspan="2" style="width: 100%; {labelCellStyle}" {labelCellAttrs}>',
                    '{beforeLabelTpl}',
                    '<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
                        '<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
                        '{beforeLabelTextTpl}',
                        '<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
                        '{afterLabelTextTpl}',
                    '</label>',
                    '{afterLabelTpl}',
                '</td>',
                '<td style="width: 18px;"></td>',
            '</tr>',
        '</tpl>',


        // body row. If a heighted Field (eg TextArea, HtmlEditor, this must greedily consume height.
        '<tr id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl>>',


            // Label cell
            '<tpl if="labelOnLeft">',
                '<td id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>',
                    '{beforeLabelTpl}',
                    '<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
                        '<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
                        '{beforeLabelTextTpl}',
                        '<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
                        '{afterLabelTextTpl}',
                    '</label>',
                    '{afterLabelTpl}',
                '</td>',
            '</tpl>',


            // Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
            '<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" role="presentation" colspan="{bodyColspan}">',
                '{beforeSubTpl}',
                '{[values.$comp.getSubTplMarkup()]}',
                '{afterSubTpl}',
            '</td>',


            // Side error element
            '<tpl if="msgTarget==\'side\'">',
                '<td id="{id}-errorEl" class="{errorMsgCls}" style="display:none" width="{errorIconWidth}"></td>',
            '</tpl>',
        '</tr>',


        // Under error element is another TR
        '<tpl if="msgTarget==\'under\'">',
            '<tr>',
                // Align under the input element
                '<tpl if="labelOnLeft">',
                    '<td></td>',
                '</tpl>',
                '<td id="{id}-errorEl" class="{errorMsgClass}" colspan="{[values.labelOnLeft ? 2 : 3]}" style="display:none"></td>',
            '</tr>',
        '</tpl>',
        {
            disableFormats: true
        }
]
});

The only drawback here is that you lose 18px of space to the right of the label.

I would have placed the override directly onto the labelable mixin, but I don't know if that is possible. Can mixins be "overriden" before they are injected into classes?

-Kevin

[4.1] Form field with incorrect width on validation, if msgTarget: 'side'

Thread Tools

Search Thread

Display

[4.1] Form field with incorrect width on validation, if msgTarget: 'side'

[4.1] Form field with incorrect width on validation, if msgTarget: 'side'

Same Issue

Same Issue