On Fri, 2007-12-07 at 11:29 +0100, Maria Siebert wrote:
> Hi,
>
> I just started building forms using the GridLayout, because it made
> changes so easy. Normally I build a layout with fixed sizes for the text
> and flexible size for the fields, so if the user changes the window size,
> he can change the size of the input fields.
>
> Is there a chance to do such things with the GridLayout?
>
> Maria
I tried to do this with the GridLayout as well, but couldn't figure it
out. Since then, I've switched back to VerticalBoxLayout, and have
developed this utility method to help me with form layout. It could be
easily expanded/adapted to meet your needs.
The other restriction in GridLayout that drove this was that you have to
specify in advance how many rows of fields you will have. This doesn't
work for me in the case where I have a base class that sets up most of
the form, but sub-classes that add specific fields to the form after the
base class has done it's work.
Here's some sample code that calls my utility method:
...
var form_layout = new qx.ui.layout.VerticalBoxLayout;
form_layout.set({left:0, top:0, right:0, bottom:0, spacing:0 });
var leftWidth = 140;
var middleWidth = 80;
// ID & Name
my.Statics.addFieldsToForm( this, form_layout,
"ID:", leftWidth, "idField", "TextField",
"Name:", middleWidth, "nameField", "TextField");
this.idField.setReadOnly(true);
this.idField.setValue(this.m_object_id);
// Product & Version
my.Statics.addFieldsToForm( this, form_layout,
"Product:", leftWidth, "productField", "ComboBox",
"Version:", middleWidth, "versionField", "ComboBox");
this.productField.addEventListener("changeSelected",
this.getProductVersion, this);
...
and here's the utility method itself:
/** This method helps us with form field layouts. The idea is that
* the form is a vertical box layout. Each row is either one or
* two fields (with labels) laid out in a horizontal box layout.
*/
addFieldsToForm : function ( theThis, layout,
label1Name, label1Size, field1Name, field1Type,
label2Name, label2Size, field2Name, field2Type)
{
var hb = new qx.ui.layout.HorizontalBoxLayout;
hb.set({paddingTop:3, height:"auto", overflow:"auto"});
hb.setVerticalChildrenAlign("middle");
var l1 = new qx.ui.basic.Label( label1Name );
l1.setWidth(label1Size);
hb.add(l1);
var f1 = null;
if( field1Type === "TextField"){
f1 = new qx.ui.form.TextField;
f1.setLiveUpdate(true);
} else if( field1Type === "PasswordField"){
f1 = new qx.ui.form.PasswordField;
f1.setLiveUpdate(true);
} else if(field1Type === "ComboBox") {
f1 = new qx.ui.form.ComboBox;
}
f1.setWidth("1*");
hb.add(f1);
theThis[field1Name] = f1;
if(label2Name){
var l2 = new qx.ui.basic.Label( "" );
l2.setWidth(5);
hb.add(l2);
var l3 = new qx.ui.basic.Label( label2Name );
l3.setWidth(label2Size);
hb.add(l3);
var f2 = null;
if( field2Type === "TextField"){
f2 = new qx.ui.form.TextField;
f2.setLiveUpdate(true);
} else if( field2Type === "PasswordField"){
f2 = new qx.ui.form.PasswordField;
f2.setLiveUpdate(true);
} else if(field2Type === "ComboBox") {
f2 = new qx.ui.form.ComboBox;
} else if(field2Type === "Spacer") {
f2 = new qx.ui.basic.HorizontalSpacer;
f2.setWidth("1*");
}
f2.setWidth("1*");
hb.add(f2);
if(field2Name){
theThis[field2Name] = f2;
}
var l3 = new qx.ui.basic.Label( "" );
l3.setWidth(2);
hb.add(l3);
}
layout.add(hb);
},
Enjoy,
Steven
-------------------------------------------------------------------------
SF.Net email is sponsored by:
Check out the new SourceForge.net Marketplace.
It's the best place to buy or sell services for
just about anything Open Source.
http://sourceforge.net/services/buy/index.php
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
