View Full Version : [CLOSED] Form width incorrect and changes unexpectedly

24 Oct 2011, 6:19 AM

Ext version tested:

Ext 4.0.7

Browser versions tested against:

Firefox 7.0.1 (firebug 1.8.3 installed)
Google Chrome 14.0.835.202 m
Internet Explorer 8.0.6001.18702
Opera 11.85 (build 1087)
Safari 5.1 (7534.50)

DOCTYPE tested against:

<!DOCTYPE html>


If a form is in a border layout, the initial width is incorrect and then changes in response to seemingly unrelated events.

Steps to reproduce the problem:

Create a view using the provided code below and observe the width of the form.
Click the 'Load' button.
Switch to the other tab.
Switch back to the form tab.

The result that was expected:

The width of the form is always 500.

The result that occurs instead:

The initial layout ignores the specified width and uses the full width of the view.
The load operation causes the form to change width (although this does produce the initially desired width).
Switching to the other tab and back again causes the form to expand to the full width of the view again.

Test Case:

Ext.define('MyOptions', {
extend: 'Ext.form.Panel',
alias: 'widget.options',
bodyPadding: 10,
width: 500,
items: [{
xtype: 'fieldset',
title: 'My Options',
xtype: 'textfield',
id: 'name',
fieldLabel: 'Name',
anchor: '100%'

launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'tabpanel',
region: 'center',
activeTab: 0,
items: [{
xtype: 'options',
title: 'Form panel'
}, {
xtype: 'panel',
title: 'Other panel'
tbar: [{
xtype: 'button',
text: 'Load',
handler: function() {
var form = Ext.ComponentQuery.query('form')[0];

The URL for loading the form uses options.js, which is below:

success: true,
data: {
name: 'rob'


Screenshot or Video:


Debugging already done:

If you comment out the "layout: 'border'" line then the width is correct.

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

WinXP Pro 64-bit

25 Oct 2011, 2:35 PM
You're specifying the width on the wrong component. Since the form is the child of the tab panel, it uses a card layout, which is a descendant of fit layout. That means the form will always be sized to fit the tab panel. As such, you should specify the width on the fieldset, not on the form.

26 Oct 2011, 1:03 AM
But is it right that loading the form causes the page layout to change? That doesn't sound right to me.

26 Oct 2011, 1:04 AM
Thanks for the information about setting the width on the fieldset. That's fixed my layout issues.

26 Oct 2011, 1:05 AM
The loading will trigger a component layout which will likely trigger a layout on the container which will read the width property. However, it's still incorrect specify a width on a child item of a card layout.