PDA

View Full Version : vbox layout stretches correctly on IE, but on on FF



lsaffre
3 May 2010, 1:22 PM
Hi all,

I hope for your help with a layout problem.

Please have a look at the Source code (http://code.google.com/p/lino/source/browse/extjs-showcases/20100503_vbox_stretch.html) of the showcase that demonstrates my problem.
It opens a Window with a single item (a FormPanel) with vbox layout and 3 items; the third item (which contains a htmleditor) has stretch:1, the others have stretch:0. My problem is that the second item (country, region and email) takes too much height. At least when using Firefox:

Here is a screenshot of the result (Firefox 3.6.3 on Windows XP) :
http://lino.googlecode.com/hg/screenshots/20100503.jpg (http://lino.googlecode.com/hg/screenshots/20100503.jpg)
On IE the same showcase renders as expected:

http://lino.googlecode.com/hg/screenshots/20100503b.jpg (http://lino.googlecode.com/hg/screenshots/20100503b.jpg)
I'm using ExtJS version 3.2.1.

Am I doing something forbidden? Is there a workaround for this problem?

Thanks for any hint!
Luc

mitchellsimoens
3 May 2010, 7:59 PM
try this:


var form = new Ext.form.FormPanel({
labelAlign: "top",
frame: true,
width: 400,
height: 400,
items: [{
layout: "column",
items:[{
columnWidth: .6,
layout: "form",
items: [{
xtype: "textfield",
allowBlank: false,
fieldLabel: "name",
anchor: "100%",
name: "name",
maxLength: 200
},{
xtype: "panel",
layout: "column",
items: [{
columnWidth: .3,
layout: "form",
items: [{
xtype: "textfield",
allowBlank: false,
fieldLabel: "country",
anchor: "100%",
name: "country",
maxLength: 200
}]
},{
columnWidth: .7,
layout: "form",
items: [{
xtype: "textfield",
maxLength: 200,
fieldLabel: "region",
anchor: "100%",
name: "region"
}]
}]
}]
},{
columnWidth:.4,
layout: "form",
items: [{
xtype: "textfield",
maxLength: 200,
fieldLabel: "national id",
anchor: "100%",
name: "national_id"
},{
xtype: "textfield",
fieldLabel: "email",
anchor: "100%",
name: "email",
vtype: "email"
}]
}]
},{
xtype: "htmleditor",
fieldLabel: "remarks",
name: "remarks",
anchor: "100% 100%"
}]
});

var win = new Ext.Window({
title: "Insert into Companies",
width: 400,
height: 400,
layout: "fit",
items: form
}).show();

Tested on IE8, FF3.6, and Chrome5 on Win7 64bit and they all look identical.

lsaffre
4 May 2010, 12:40 AM
Thank you, Mitchell. Yes, your code is a workaround for this special form. You get a working form by changing the structure of the components used. Unfortunately I need a more general solution because this example was only a simplified case. I'd say that this is obviously a bug since my code produces different results on FF and on IE. Any opinions on whether this is a bug worth being reported? I've not much time right now, but I'll do what I can to isolate the problem and file a bug report.