Just a thought, we had something similar. We found that that using a
grid layout was far better, does this fit your need? It has less
overhead that several nested containers (AFAIK) and if some control
doesn't behave correctly and is too large, if you are using flex it will
affect all controls in that column ;)
HTH Matt
Mr. Hericus wrote:
> Hi All,
>
> In a typical form, we layout widgets line by line using a parent VBox
> composite holding a series of lines which are HBox composites. Usually
> each line as 4 components (label, field, label, field). The labels are
> fixed in size, and the fields are set to {flex: 1} so that everything
> will line up, but also stretch dynamically as the window or form is
> re-sized. (code is below)
>
> With 0.7 when a ComboBox and a TextField were on the same line, there
> was no problems. The flex sizing evaluated both equally and gave each
> field the same size. However, with 0.8.1, this is not the case. The
> ComboBox has extra size compared to the TextField, and as a result, the
> fields get shifted around.
>
> I would submit that this is a bug in the flex sizing. The extra area
> for the ComboBox appears to be comming from the drop-down arrow and is
> added to the size of the ComboBox making it bigger than the text field.
>
> I've used the Playground application (very sweet, BTW) to work up a
> simple example of this. If y'all agree that this is a bug, I'll go
> ahead and submit it.
>
> Sincerely,
>
> Mr. Hericus
> m...@hericus.com
> http://www.hericus.com/
>
>
> var win = new qx.ui.window.Window("First Window");
> win.setWidth(600);
> win.setHeight(400);
> win.setShowMinimize(false);
>
> /* Demonstrate field layout flex inequalities. */
>
> // First set up a standard VBox composite
> win.setLayout( new qx.ui.layout.VBox(10) );
>
> var firstWidth = 80;
> var secondWidth = 120;
>
> // Now add a series of HBox composites that represent each line of the
> form.
>
> // First HBox: text, text
> var line1 = new qx.ui.container.Composite( new qx.ui.layout.HBox() );
> var l1_l1 = new qx.ui.basic.Label("Line 1:");
> l1_l1.setWidth( firstWidth );
> var l1_t1 = new qx.ui.form.TextField();
> var l1_s1 = new qx.ui.core.Spacer(5);
> var l1_l2 = new qx.ui.basic.Label("Label 2:");
> l1_l2.setWidth( secondWidth );
> var l1_t2 = new qx.ui.form.TextField();
> line1.add( l1_l1 ); // the label
> line1.add( l1_t1, {flex:1}); // the text
> line1.add( l1_s1 ); // spacer
> line1.add( l1_l2 ); // the label
> line1.add( l1_t2, {flex:1}); // the text
> win.add(line1); // add it to the window
>
> // Second HBox: combo, combo
> var line2 = new qx.ui.container.Composite( new qx.ui.layout.HBox() );
> var l2_l1 = new qx.ui.basic.Label("Line 2:");
> l2_l1.setWidth( firstWidth );
> var l2_t1 = new qx.ui.form.ComboBox();
> var l2_s1 = new qx.ui.core.Spacer(5);
> var l2_l2 = new qx.ui.basic.Label("Label 2:");
> l2_l2.setWidth( secondWidth );
> var l2_t2 = new qx.ui.form.ComboBox();
> line2.add( l2_l1 ); // the label
> line2.add( l2_t1, {flex:1}); // the text
> line2.add( l2_s1 ); // spacer
> line2.add( l2_l2 ); // the label
> line2.add( l2_t2, {flex:1}); // the text
> win.add(line2); // add it to the window
>
> // Third HBox: text, combo
> var line3 = new qx.ui.container.Composite( new qx.ui.layout.HBox() );
> var l3_l1 = new qx.ui.basic.Label("Line 3:");
> l3_l1.setWidth( firstWidth );
> var l3_t1 = new qx.ui.form.TextField();
> var l3_s1 = new qx.ui.core.Spacer(5);
> var l3_l2 = new qx.ui.basic.Label("Label 2:");
> l3_l2.setWidth( secondWidth );
> var l3_t2 = new qx.ui.form.ComboBox();
> line3.add( l3_l1 ); // the label
> line3.add( l3_t1, {flex:1}); // the text
> line3.add( l3_s1 ); // spacer
> line3.add( l3_l2 ); // the label
> line3.add( l3_t2, {flex:1}); // the text
> win.add(line3); // add it to the window
>
> // Fourth HBox: combo, text
> var line4 = new qx.ui.container.Composite( new qx.ui.layout.HBox() );
> var l4_l1 = new qx.ui.basic.Label("Line 4:");
> l4_l1.setWidth( firstWidth );
> var l4_t1 = new qx.ui.form.ComboBox();
> var l4_s1 = new qx.ui.core.Spacer(5);
> var l4_l2 = new qx.ui.basic.Label("Label 2:");
> l4_l2.setWidth( secondWidth );
> var l4_t2 = new qx.ui.form.TextField();
> line4.add( l4_l1 ); // the label
> line4.add( l4_t1, {flex:1}); // the text
> line4.add( l4_s1 ); // spacer
> line4.add( l4_l2 ); // the label
> line4.add( l4_t2, {flex:1}); // the text
> win.add(line4); // add it to the window
>
> this.getRoot().add(win, {left:20, top:20});
> win.open();
>
>
>
> ------------------------------------------------------------------------------
> Check out the new SourceForge.net Marketplace.
> It is the best place to buy or sell services for
> just about anything Open Source.
> http://p.sf.net/sfu/Xq1LFB
------------------------------------------------------------------------------
Check out the new SourceForge.net Marketplace.
It is the best place to buy or sell services for
just about anything Open Source.
http://p.sf.net/sfu/Xq1LFB
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
