GridPanel2

BiGridPanel2 is a layout tool which emulates the behavior of a standard html table. In many situations a layout that previously was done with multiple nested HBoxes and VBoxes can be replaced by a single gridpanel2, which will drastically improve performance. The rows and cells are used to calculate the layout, and do not create any extra visual (DOM) elements.

A layout is created by adding rows with cells to the gridpanel2. Cells support spanning, alignment, padding and stretching. Row and column sizes are defined in the same way as in BiGridPanel.

An example

Below is an example of a gridpanel2 created through xml:

    <GridPanel2 rows="-,22,17,-,1*" cols="-,10,26,48,47,1*" left="0" top="0" right="0" bottom="0">

        <!-- A row-->
        <GridPanel2Row>
            <GridPanel2Cell stretch="none" valign="bottom" align="right">
                <Label text="Name:"/>
            </GridPanel2Cell>
            <GridPanel2Cell/>
            <GridPanel2Cell colSpan="3">
                <TextField/>
            </GridPanel2Cell>
        </GridPanel2Row>

        <GridPanel2Row>
            <GridPanel2Cell stretch="none" valign="bottom" align="right">
                <Label text="Address:"/>
            </GridPanel2Cell>
            <GridPanel2Cell/>
            <GridPanel2Cell colSpan="3">
                <TextField/>
            </GridPanel2Cell>
        </GridPanel2Row>

        <GridPanel2Row>
            <GridPanel2Cell colSpan="2" rowSpan="2"/>
        </GridPanel2Row>

        <GridPanel2Row>
            <GridPanel2Cell/>
            <GridPanel2Cell>
                <Button text="Ok"/>
            </GridPanel2Cell>
            <GridPanel2Cell>
                <Button text="Cancel"/>
            </GridPanel2Cell>
        </GridPanel2Row>

        <GridPanel2Row/>
    </GridPanel2>

And here is how it can be created through javascript:

    var g = new BiGridPanel2;

    // define row and column sizes
    g.setRows("*,-,*);
    g.setCols("*,-,*);

    // add empty row
    g.add(new BiGridPanel2Row);

    // add row with a button in the 2nd column
    var r = new BiGridPanel2Row;
    r.add(new BiGridPanel2Cell);
    r.add(new BiGridPanel2Cell(new BiButton("Button in a gridpanel2"));
    g.add(r);

    // add empty row
    g.add(new BiGridPanel2Row);

Considerations

A cell can only contain one component. If a component with bigger size than the cell is added to a non stretching cell it will overlap other cells.

If the rows or cols array contains fewer elements than the rows/columns added to the gridpanel2 the extra rows and columns will not be laidout properly.

Components cannot be added directly to the gridpanel2, they must be added to a cell which is added to a row.

Preferred sizes for components stretching several rows/columns are distributed evenly over all it's spanned rows/columns. This does not yield the desired result in all cases.

Try It

CLICK the image below to run.

Don't forget to drag and drop elements, right click to explore capabilities of the Bindows GridPanel2 Designer, and then unselect the "Design Mode" to see it in action.

If you have ideas or wishes for what it should do, please send a note to sales@bindows.net.