Example of Creating the GridPanel Component

Add links to the PP.js library and the PP.css visual style table to execute the example in the HEAD tag of the HTML page. DIV tag with the ID gp1 must be available. There are example of dynamic and static allocation of the GridPanel component with the ColorCombo, Label and TextBox component located on it.

Example of the GridPanel component static allocation

<script type="text/javascript">

    var container = new PP.Ui.GridPanel({ ParentNode: document.getElementById("gp1") });

    var label1 = new PP.Ui.Label({ Top: 0, Left: 0, Content: "ColorCombo" });

    var colorCombo = new PP.Ui.ColorCombo({ Top: 0, Left: 1 });

    container.add(label1);

    container.add(colorCombo);

    var label2 = new PP.Ui.Label({ Top: 1, Left: 0, Content: "TextBox" });

    var textBox = new PP.Ui.TextBox({ Top: 1, Left: 1, Content: "Rosstat", Width: 200 });

    container.add(label2);

    container.add(textBox);

</script>

The example of the GridPanel component dynamic allocation

<script type="text/javascript">

    var container = new PP.Ui.GridPanel({

        Items: [new PP.Ui.Label({ Top: 0, Left: 0, Content: "ColorCombo" }),

                new PP.Ui.ColorCombo({ Top: 0, Left: 1 }),

                new PP.Ui.Label({ Top: 1, Left: 0, Content: "TextBox" }),

                new PP.Ui.TextBox({ Top: 1, Left: 1, Content: "Rosstat", Width: 200 })],

        ParentNode: document.getElementById("gp1")

    });

</script>

After executing the example the GridPanel component that has the following view is located on the HTML page:

See also:

GridPanel