Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-6142 in a recent build.
  1. #1
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    192
    Vote Rating
    0
    jmaia is on a distinguished road

      0  

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

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


    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)

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,660
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Could you please post a full test case? It's important to see the nesting (if any) for your form.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    192
    Vote Rating
    0
    jmaia is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,660
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


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

    http://screencast.com/t/bMRx9YE3Tt4
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    192
    Vote Rating
    0
    jmaia is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    6
    Vote Rating
    0
    c2c-bacardi is on a distinguished road

      0  

    Default Same Issue

    Same Issue


    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

Thread Participants: 2