PDA

View Full Version : [CLOSED-531] FormPanel fields jump when collapsing panel



dzwillia
6 Feb 2010, 5:00 PM
Hello,

When collapsing a form panel, the fields jump horizontally both when collapsing and expanding the form panel. This bug could only be reproduced in Gecko-based browsers.

Here's a very basic example:

new Ext.form.FormPanel({
renderTo: Ext.getBody(),
title: 'Jumping fields',
collapsible: true,
padding: 10,
items: [{
fieldLabel: 'Text Field',
xtype: 'textfield'
},{
fieldLabel: 'ComboBox',
xtype: 'combo'
},{
fieldLabel: 'Text Area',
xtype: 'textarea'
}]
});Here's another example with a form panel using a column layout:

new Ext.form.FormPanel({
renderTo: Ext.getBody(),
title: 'Jumping fields in a form with column layout',
collapsible: true,
padding: 10,
items:[{
layout:'column',
items:[{
width:'30%',
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'Field #1'
}]
},{
width:'30%',
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'Field #2'
}]
},{
width:'30%',
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'Field #3'
}]
}]
}]
});This bug is reproducible on the following browsers:
- Firefox 3.6 (Mac and Windows)
- Firefox 2.0.20 (Windows)

I've also tested the above code on the following browsers and the collapse/expand works as it should:
- Chrome 4.0 (Mac and Windows)
- Safari 4.0 (Mac)
- IE8, IE7 and IE6 (obviously all on Windows)

I've been able to reproduce the bug in Ext 3.0, Ext 3.1 as well as Ext 3.1.1 RC.

evant
7 Feb 2010, 7:53 PM
Confirmed. I'll open a ticket. In the meantime, you might want to check this out: http://www.extjs.com/forum/showthread.php?t=44643&highlight=x-panel-animated

dzwillia
8 Feb 2010, 12:53 PM
Thanks for looking into this -- I find myself using collapsible form panels quite often!

Also, thanks for the link to the old Ext JS 2.2 post -- it certainly sheds some light on what's going on "under the hood", although I don't believe Mark's "solution" fixes the problem (at least it didn't fix the problem when I tested it on my code).

I look forward to testing things out when the issue is resolved. Let me know if there's anything else I can do to help.

Jamie Avins
4 Mar 2010, 12:02 PM
Not much we can do for this, there if we don't hide the overflow FF has serious display issues. Hiding it makes the fields 'jump'. We've chosen what we believe to be the lesser of the 2 issues. The following shows each case:

https://www.extjs.com/forum/showthread.php?p=238479

dzwillia
4 Mar 2010, 12:16 PM
Fair enough. I guess I'm stuck with it that way until I find a workaround. Thanks for the link to the other forum post... it's quite helpful. Thanks again for looking into the matter!