Text Field not adhering to specified Width value in FormPanel

[parky128]

Hi,

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: ''
}
]
};
SBS.Websites.PP3.UserDetailsWindowUi.superclass.initComponent.call(this);
}
});
Thanks,
Rob

[Screamy]

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.

[parky128]

Of course! My bad, thanks for pointing out the obvious, the field is sizing correctly now :)