Problems with field width after upgrading to 4.1

[jmaia]

Hello there,

I just updated from 4.0.7 to 4.1 and started having a problem with field width. Some fields suddenly have lower widths than they had before.

This happened on some extensions I had created (mainly extensions from combobox class) but also on common Ext.form.field.Text fields.

I still can't figure out a pattern to this behavior, but one thing I noticed was that it happens when the field is validated. If I have msgTarget = side, and the user input validation is incorrect, the field width is suddenly smaller, and once I input a valid value it returns to its normal size.

Anyone experienced this weird behavior ?

I will try to find out more in order to open a case, but if in the meantime someone can give me some pointers, maybe I can figure it out.

Thanks,

Joao Maia

[Tim Toady]

Hard to say without seeing code, but make sure you don't have any old overrides, css, or themes from 4.07 that could be affecting it.

[jmaia]

Here's an example of a the configuration of a form panel that I have where this behavior occurs:

{
	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
		}
	]
}

When you tab out of the first field without filling it, since it has allowBlank: false, it will trigger the validation and the sudden shrinking of its width...

It does not have anything fancy, no aditional css, or any overrides, that I can see.

Regards,

Joao Maia

[Tim Toady]

Looks like you found a bug. I played around with it a little. As you noted, it is an odd combination to cause it.

I think this is the basic recipe

fieldDefaults:{
        msgTarget    :'side',
        allowBlank   :false,
        anchor       :'100%',      //Can be any percentage
        labelAlign   :'top'
}

If you remove the anchor, align the label differently, or don't use a side msgTarget it won't happen. If I was in your situation, I would just remove the msgTarget so that the user needs to hover to see the validation error. Kinda funky having a side target on 100% width anyway. You may want to file a bug too.