PDA

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



rhamflett
24 Oct 2011, 6:19 AM
REQUIRED INFORMATION




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>


Description:

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',
items:[{
xtype: 'textfield',
id: 'name',
fieldLabel: 'Name',
anchor: '100%'
}]
}]
});


Ext.application({
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];
form.load({url:'options.js'});
}
}]
}]
});
}
});



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


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







HELPFUL INFORMATION




Screenshot or Video:

attached




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

evant
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.

rhamflett
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.

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

evant
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.