qx.ui.layout.Grid is like a combined VBox & Hbox. Grid supports:

• Variable width/height columns/rows.
• Cells spanning multiple columns/rows.
• Empty cells.

Grid Layout

Here is a simple application using a Grid layout:

   1 /*
   2 #asset(grid/*)
   3 */
   4 qx.Class.define("grid.Application",
   5 {
   6     extend: qx.application.Standalone,
   7     members: {
   8         main: function(){
   9             this.base(arguments);
  10 
  11             var main_container = new qx.ui.container.Composite();
  12 
  13             var layout_manager = new qx.ui.layout.Grid();
  14             main_container.setLayout(layout_manager);
  15 
  16             main_container.add(new qx.ui.form.Button("Child Widget 1"), {row: 0, column: 0});
  17             main_container.add(new qx.ui.form.Button("Child Widget 2"), {row: 0, column: 1});
  18             main_container.add(new qx.ui.form.Button("Child Widget 3"), {row: 0, column: 2});
  19             main_container.add(new qx.ui.form.Button("Child Widget 4"), {row: 1, column: 0});
  20             main_container.add(new qx.ui.form.Button("Child Widget 5"), {row: 1, column: 1});
  21             main_container.add(new qx.ui.form.Button("Child Widget 6"), {row: 1, column: 2});
  22 
  23             var application_root = this.getRoot();
  24             application_root.add(main_container);
  25         }
  26     }
  27 });

Grid Example 1

We have created an 3×2 table layout without explicitly stating row/column count. Just set your row and column layout preferences when you add your child widgets.

Try commenting out some cells to see what happens. If you, for example, comment out second (0,1) and fifth (1,1) cells the second column disappears. But missing cells are OK otherwise. You can see below the layout when third and fifth cells are commented:

Grid Example 1 - Missing Cells

Following example illustrates row/column spanning:

   1 /*
   2 #asset(grid/ *)
   3 */
   4 qx.Class.define("grid.Application",
   5 {
   6     extend: qx.application.Standalone,
   7     members: {
   8         main: function(){
   9             this.base(arguments);
  10 
  11             var main_container = new qx.ui.container.Composite();
  12 
  13             var layout_manager = new qx.ui.layout.Grid();
  14             main_container.setLayout(layout_manager);
  15 
  16             main_container.add(new qx.ui.form.Button("Child Widget 1"), {
  17                 row: 0,
  18                 column: 0,
  19                 rowSpan: 2
  20             });
  21             main_container.add(new qx.ui.form.Button("Child Widget 2"), {
  22                 row: 0,
  23                 column: 1,
  24                 colSpan: 2
  25             });
  26             main_container.add(new qx.ui.form.Button("Child Widget 3"), {
  27                 row: 1,
  28                 column: 1
  29             });
  30             main_container.add(new qx.ui.form.Button("Child Widget 4"), {
  31                 row: 1,
  32                 column: 2
  33             });
  34 
  35             var application_root = this.getRoot();
  36             application_root.add(main_container);
  37         }
  38     }
  39 });

Grid Example 2

Spanning is easy, just like HTML tables. But we set placement (row and column parameters) explicitly. We can add our widgets in any order and still get the same layout if we use the same preferences.

As I said in the beginning of this part Grid is like a combination of VBox and HBox. Therefore flexing is two dimensional:

   1 /*
   2 #asset(grid/ *)
   3 */
   4 qx.Class.define("grid.Application",
   5 {
   6     extend: qx.application.Standalone,
   7     members: {
   8         main: function(){
   9             this.base(arguments);
  10 
  11             var main_container = new qx.ui.container.Composite();
  12 
  13             var layout_manager = new qx.ui.layout.Grid();
  14             layout_manager.setRowFlex(0, 1);
  15             layout_manager.setRowFlex(1, 1);
  16             layout_manager.setColumnFlex(0, 1);
  17             layout_manager.setColumnFlex(2, 1);
  18             main_container.setLayout(layout_manager);
  19 
  20             main_container.add(new qx.ui.form.Button("Child Widget 1"), {
  21                 row: 0,
  22                 column: 0,
  23                 rowSpan: 2
  24             });
  25             main_container.add(new qx.ui.form.Button("Child Widget 2"), {
  26                 row: 0,
  27                 column: 1,
  28                 colSpan: 2
  29             });
  30             main_container.add(new qx.ui.form.Button("Child Widget 3"), {
  31                 row: 1,
  32                 column: 1
  33             });
  34             main_container.add(new qx.ui.form.Button("Child Widget 4"), {
  35                 row: 1,
  36                 column: 2
  37             });
  38 
  39             var application_root = this.getRoot();
  40             application_root.add(main_container);
  41 
  42             application_root.addListener("resize", function(e) {
  43                 main_container.set({
  44                     "width": qx.bom.Viewport.getWidth(),
  45                     "height": qx.bom.Viewport.getHeight(),
  46                 });
  47             }, this);
  48         }
  49     }
  50 });

Grid Example 3

We have set rowFlex (vertical) and columnFlex (horizontal) for specific rows/columns on the layout manager itself. Try resizing the window to see how cells react. Note that second column (column index 1) doesn’t flex horizontally.

NEXT PART: Back To Basics

No related posts.