PDA

View Full Version : [CLOSED]Form/fieldset resizing issue



meroy
27 Feb 2010, 8:39 PM
The following is a test case for validating resizing for a field set.

The test case below contains two field sets. The first is configured as xtype: 'fieldset' and the 2nd as xtype: 'panel'.

Various issues with this:

3.0.0 / 3.0.3 / 3.1.0
Increasing the width of the window works.
Decreasing the width only works if xtype is changed from 'fieldset' to 'panel'.
If resizing works when the width is increased, why not the other way around?

3.1.1 / SVN 6162 3.2.x
Resizing fails both directions for both forms
Edit: Setting monitorResize to true for the TabPanel now behaves like 3.0.0, 3.0.3, 3.1.0 above.

SVN 6180 3.2.x
Child form elements are not rendered. I'm only seeing the titles for the forms.
Edit: I added doLayout at the end as CardLayout.js will only do a shallow layout now.
Edit: This demonstration works fully as expected with SVN 6180 3.2.x.




Ext.onReady(function() {
var tab = new Ext.TabPanel({
renderTo: document.body,
monitorResize: true, // edit: Added this and updated comment on 3.1.1 and 6162 above
layoutOnTabChange: true,
activeTab: 0,
items: [{
title: 'test',
border: false,
layout: 'anchor', // edit: Added this plus next line and updated comment on SVN 6180 3.2.x above
anchor: '100%',
autoHeight: true,
padding: 10,
items: [{
xtype: 'fieldset',
title: 'Fieldset 1',
layout: 'column',
defaultType: 'container',
defaults: {
layout: 'form',
labelWidth: 88,
defaultType: 'textfield',
columnWidth: 0.5,
defaults: { anchor: '-19' }
},
items: [{
items: [
{ fieldLabel: 'Col 1 textfield' },
{ fieldLabel: 'Col 1 textfield' },
{ fieldLabel: 'Col 1 textfield' },
{ fieldLabel: 'Col 1 textfield' }
]
},{
items: [
{ fieldLabel: 'Col 2 textfield' },
{ fieldLabel: 'Col 2 textfield' },
{ fieldLabel: 'Col 2 textfield' },
{ fieldLabel: 'Col 2 textfield' }
]
}]
},{
xtype: 'panel', // change this to fieldset
title: 'Fieldset 2',
layout: 'column',
defaultType: 'container',
defaults: {
layout: 'form',
labelWidth: 88,
defaultType: 'textfield',
columnWidth: 0.3333,
defaults: { anchor: '-19' }
},
items: [{
items: [
{ fieldLabel: 'Col 1 textfield' },
{ fieldLabel: 'Col 1 textfield' },
{ fieldLabel: 'Col 1 textfield' },
{ fieldLabel: 'Col 1 textfield' }
]
},{
items: [
{ fieldLabel: 'Col 2 textfield' },
{ fieldLabel: 'Col 2 textfield' },
{ fieldLabel: 'Col 2 textfield' },
{ fieldLabel: 'Col 2 textfield' }
]
},{
items: [
{ fieldLabel: 'Col 3 textfield' },
{ fieldLabel: 'Col 3 textfield' },
{ fieldLabel: 'Col 3 textfield' },
{ fieldLabel: 'Col 3 textfield' }
]
}]
}]
}]
});
tab.doLayout(); // Edit: Folks may need to run doLayout after adding a tab.
});

meroy
27 Feb 2010, 9:58 PM
I have edited the first post. All versions mentioned there behave the same.

Resizing works for form elements contained within a fieldset when increasing the width of the window. However, not the other way around when decreasing the width.

In the sample above, the 2nd form has an xtype of 'panel'. Resizing works in both direction for that one. Shouldn't this work as well for a fieldset?

Animal
28 Feb 2010, 12:14 PM
Your actual tab, title: 'test' has no layout. So the descendant Components are not being explicitly sized according to their Container sizes.

evant
28 Feb 2010, 7:20 PM
Also, you aren't specifying dimensions for your outermost panel, which is always a cause for trouble.

meroy
28 Feb 2010, 7:35 PM
Thanks. I added layout: 'form' for the actual tab titled 'test' and it works. Resizing works for both directions including the fieldset.

layout: 'auto' -- the default when not not specified works for the fieldset configured as xtype: 'panel'. As xtype: 'fieldset', resizing is fine when increasing the width, but not when going the other direction.

The initial demonstration works for the most part. Only decreasing the width of the window fails for xtype: 'fieldset'.

Adding layout: 'form', something other than the default 'auto' solved the problem.

meroy
28 Feb 2010, 7:46 PM
The following also works for the initial tab:



layout: 'anchor',
anchor: '100%',


Should layout: 'auto' have worked here? It does for the 2nd form as I changed xtype for the 2nd fieldset to 'panel'.

Thank you guys for putting me back on track here.

I was doing some edge testing against the 6180 3.2.x revision. I was wondering why a child component of xtype: 'fieldset' was half working when xtype: 'panel' was fine for both directions.

meroy
28 Feb 2010, 9:45 PM
I updated the code sample in the first post above. This sample works fully with SVN 6180 3.2.x. Have not tested against the 3.1.x revision in SVN though.

The sample above will fail with 3.0.0, 3.0.3, 3.1.0, 3.1.1 and SVN 6162. Initial layout is fine. Resizing is also working as expected when increasing the width of the window. Only the fieldset fails when decreasing the width.

However, the demonstration works 100% with SVN 6180 3.2.x.

This is awesome.

Again, I was just doing some edge testing against 6180. I wanted to see if I could change the table config for the test case tool I have to use a column layout for the form elements instead. At the same time, I wanted to make the entire panel auto resize.

Things I have learn with the current build and my be helpful for others:

1. If resizing is failing, try setting monitorResize to true. monitorResize was removed from TabPanel.js some time back.

2. CardLayout.js now does a shallow layout. Depending on the app, one may need to call doLayout after adding a tab.

Kind regards,
Mario

Animal
1 Mar 2010, 12:51 AM
No. layout: 'auto' (The default layout if none is specified) does no sizing on child items.

http://www.extjs.com/deploy/dev/docs/?class=Ext.Container


When either specifying child items of a Container, or dynamically adding Components to a Container, remember to consider how you wish the Container to arrange those child elements, and whether those child elements need to be sized using one of Ext's built-in layout schemes. By default, Containers use the ContainerLayout scheme which only renders child components, appending them one after the other inside the Container, and does not apply any sizing at all.


(The bold emphasis is in the API docs page, I haven't added it here for effect)

meroy
1 Mar 2010, 5:47 AM
Got it. Thank you very much.