PDA

View Full Version : please help with a layout problem



lsaffre
1 Mar 2010, 5:06 AM
Hello,

is there a merciful soul here who can explain me why the following code doesn't produce the expected result? The screenshot shows what it does, but I'd expect the fields 'name' and 'language' to stretch over the width of the window.

I agree that the "additional wrappers" don't seem useful in this example, but that's because the example is simplified.



test5 = function() {

// define 3 fields:
var name_field = { "fieldLabel": "name", "xtype": "textfield", "name": "name", "maxLength": 200, "anchor": "100%", "allowBlank": false };
var language_field = { "fieldLabel": "language", "xtype": "textfield", "maxLength": 10, "anchor": "100%", "name": "language" };
var remarks_field = { "fieldLabel": "remarks", "anchor": "100% 100%", "name": "remarks", "xtype": "textarea" };

// wrap each field into a form layout container:
var name_wrapper = { "border": false, "labelWidth": 45, "xtype": "container", "items": [ name_field ],
"frame": true, "labelAlign": "top", "bodyBorder": false, "anchor": "100%", "layout": "form" };
var language_wrapper = { "border": false, "labelWidth": 81, "xtype": "container", "items": [ language_field ],
"frame": true, "labelAlign": "top", "bodyBorder": false, "anchor": "100%", "layout": "form" };
var remarks_wrapper = {
"flex": 1, "border": false, "layout": "form", "xtype": "container", "labelWidth": 72,
"items": [ remarks_field ], "align": "stretch", "bodyBorder": false,
"frame": true, "labelAlign": "top" };

// additional wrappers
var row1a = { "border": false, "layout": "form", "xtype": "container",
"items": name_wrapper,
"columnWidth": 0.5714285714285714, "frame": true, "bodyBorder": false, "labelAlign": "top" };
var row1b = { "border": false, "layout": "form", "xtype": "container",
"items": language_wrapper,
"columnWidth": 0.42857142857142855, "frame": true, "bodyBorder": false, "labelAlign": "top" };
var row1 = {
"layout": "column", "xtype": "container", "items": [ row1a, row1b ],
"align": "stretch", "border": false, "frame": false };

// main_panel
var main_panel = new Ext.form.FormPanel({
"layout": "vbox", "items": [ row1, remarks_wrapper ],
"align": "stretch", "autoScroll": true,
"border": false, "bodyBorder": false, "frame": true, "labelAlign": "top" });

win = new Ext.Window({
layout: 'fit',
height: 400,
width: 500,
resizable: true,
items: main_panel
});
win.show();
}
You can download the full showcase here:
http://code.google.com/p/lino/source/browse/extjs-showcases/20100301_stretch.html

Animal
1 Mar 2010, 5:09 AM
In which class is "align" a configuration option?

lsaffre
1 Mar 2010, 5:26 AM
In which class is "align" a configuration option?

Ha! Of course! I must set `layoutConfig:{align:'stretch'})`!
Thanks, Animal!