PDA

View Full Version : [INFOREQ]Vbox layout doesnt account for form fields that are hidden with trackLabels



Gjslick
4 Jun 2010, 1:21 PM
Ext version tested:


Ext 3.3.0 rev 6694


Adapter used:


ext


css used:


only default ext-all.css


Browser versions tested against:


IE8
FF3 (firebug 1.5.4 installed)


Operating System:


Win 7


Description:


When a form field is hidden with trackLabels: true, and a doLayout() call is run after, the vbox layout does not resize the form field's container. The form fields' container is sized just as if the form field was still shown.

This also happens even if the form field is completely removed (and then doLayout() is called). The parent container is still sized as if the form field was still there.

The vbox layout behavior was correct in Ext 3.1.0.



Test Case:



Ext.onReady( function() {

var field1 = new Ext.form.TextField( {
xtype: 'textfield',
fieldLabel: 'Field 1',
name: 'testField1'
} );

var field2 = new Ext.form.TextField( {
xtype: 'textfield',
fieldLabel: 'Field 2',
name: 'testField2'
} );

var panel = new Ext.form.FormPanel( {
renderTo: Ext.getBody(),
height: 300,
width: 400,

layout: {
type: 'vbox',
align: 'stretch'
},

items: [
{
xtype: 'container',
layout: {
type: 'form',
trackLabels: true
},

items: [ field1, field2 ]
},

{
xtype: 'tabpanel',
activeTab: 0,
items: [
{ title: 'Tab 1' },
{ title: 'Tab 2' }
]
}
]
} );

Ext.getBody().appendChild( document.createElement( "BR" ) );

new Ext.Button( {
renderTo: Ext.getBody(),
text: "Hide Field 2",
handler: function() {
field2.hide();

panel.doLayout(); // should resize the form field's container, and move the tab panel up
}
} );

new Ext.Button( {
renderTo: Ext.getBody(),
text: "Remove Field 2 entirely",
handler: function() {
var container = panel.items.get( 0 );
container.remove( field2 );

panel.doLayout(); // should resize the form field's container, and move the tab panel up
}
} );

} ); // eo onReady

See these URLs:
With Ext 3.1: http://www.edsoftdesign.com/extBugReports/vboxLayout_withHiddenTrackLabelField_31.cfm
(http://www.edsoftdesign.com/extBugReports/vboxLayout_withHiddenTrackLabelField_31.cfm) With Ext 3.3: http://www.edsoftdesign.com/extBugReports/vboxLayout_withHiddenTrackLabelField_33.cfm
(http://www.edsoftdesign.com/extBugReports/vboxLayout_withHiddenTrackLabelField_33.cfm)
Steps to reproduce the problem:


When you open the page, clicking the buttons perform the hide/remove action, and then runs doLayout() on the parent container.

I included both test cases in one. Reload the page between trying the hide action, and the remove action.



The result that was expected:


The two form field's container should have been resized by the vbox layout to account for the now hidden and/or removed form field. The tab panel should have then been resized to fill the new empty space.



The result that occurs instead:


The two form field's container retains its original size, whether or not the 2nd form field is hidden, or removed entirely.

evant
6 Jun 2010, 7:42 PM
In 3.1 the item doesn't layout correctly initially, so I'd say the behaviour is probably worse.

In your case, you haven't sized the items, by either:
a) Providing a height
b) Giving a flex value

If you want it to "auto" size, just use a container layout.

Gjslick
6 Jun 2010, 9:26 PM
Well, what I want to do is auto size the form field's container (depending on how many form fields are currently shown in there), and flex size the tab panel. Sorry about that, I did forget the flex: 1 config in that example code, but the bug is still there when it's included as well. (I did have the flex config in my production code, where I initially noticed the problem.)

Actually, taking that example and putting a border around the form field's container will show that it is not resized by the vbox layout when a field is hidden or removed. I updated the online example to show this. Here are two updated files, one with each Ext version to showcase the behavior. Remember to refresh the page between hiding and removing the field on each.

With Ext 3.1: http://www.edsoftdesign.com/extBugReports/vboxLayout_withHiddenTrackLabelField_31.cfm (http://www.edsoftdesign.com/extBugReports/vboxLayout_withHiddenTrackLabelField_31.cfm) (works correctly)
With Ext 3.3: http://www.edsoftdesign.com/extBugReports/vboxLayout_withHiddenTrackLabelField_33.cfm (http://www.edsoftdesign.com/extBugReports/vboxLayout_withHiddenTrackLabelField_33.cfm) (does not work correctly)

Is there a caching scheme that is now being used so that the calculations do not need to be redone on each layout if they have already been made? Perhaps that cache needs to be invalidated and the box sizes recalculated if a child component is added/removed, or shown/hidden?

-Greg

AndreKR
27 Mar 2011, 7:52 PM
I am experiencing the same problem (with adding elements, though). Any solution yet?