View Full Version : Text Field not adhering to specified Width value in FormPanel

2 Dec 2010, 5:29 AM

Probably an easy question for someone out there to answer, I have a Window containing a FormPanel as the code shows below. I have a single text field in the FormPanel, with a width of 50 set, but when the Window displays, the field fills the entire width of the FormPanel.

Where am I going wrong please?

*Note that this code is whats generated when I use Designer too

SBS.Websites.PP3.UserDetailsWindowUi = Ext.extend(Ext.Window, {
title: '',
width: 500,
height: 400,
activeItem: 0,
autoHeight: true,
modal: true,
constrain: true,
iconCls: 'userOptions',
closeAction: 'hide',
id: 'winUserDetails',
initComponent: function() {
this.items = [
xtype: 'form',
title: '',
layoutConfig: {
defaultAnchor: ''
items: [
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '95%',
width: 50
this.bbar = {
xtype: 'toolbar',
items: [
xtype: 'tbfill'
xtype: 'button',
text: 'Save Changes',
iconCls: 'save',
ref: '../btnUnitDetailsSaveChanges',
id: ''

2 Dec 2010, 5:34 AM
In your textfield declaration, you're using both an anchor and a width property. If you remove the anchor attribute, you should get the desired behavior.

Visit the API docs for Ext.layout.AnchorLayout and expand the anchor config option for some good examples of proper usage.

2 Dec 2010, 5:36 AM
Of course! My bad, thanks for pointing out the obvious, the field is sizing correctly now :)