Question

I am trying to understand Qooxdoo.

So, window, using “VBox” layout is working, toolbar too, but the table component
working wrong.

qx.Class.define("tiny.MainWindow",
{
extend : qx.ui.window.Window,

construct : function()
{
  this.base(arguments, "tiny")
  this.setContentPadding(0);

  this.setWidth(400);
  this.setHeight(300);

  var layout = new qx.ui.layout.VBox();
  this.setLayout(layout);
  this.setShowMinimize(false);
  this.setAllowClose(false);
  this.setContentPadding(0);
  this.open();

  // toolbar and buttons is hidden
  // because only table works wrong

  var tableModel = new qx.ui.table.model.Simple();
  tableModel.setColumns(["ID"]);
  tableModel.setData([[0],[1],[2],[3]]);

  var table = new qx.ui.table.Table(tableModel);
  this.add(table, {row: 1, column: 0, colSpan: 10});

  this.add(table, {flex: 1});
}
});

var tiny_window = new tiny.MainWindow();
tiny_window.open();  
tiny_window.moveTo(100, 100);

I’ve got this output:
“The property ‘row’ is not supported by the VBox layout!”

Table is shown correctly, but vertical resizing isn’t changing
table vertical size.

So, what layout types I must use with table component, toolbar?

P.S.: I am already tried “Dock” layout. Here, error is similar: “The property ‘row’ is not supported by the Dock layout!: The value ‘row’ must have any of the values defined in the array ‘flex,edge,height,width'”. Maybe I need other way to define the table size?

Answer 1

just drop the line

this.add(table, {row: 1, column: 0, colSpan: 10});

it is only valid for a grid layout

The optimal layout in your case with only one item in the window would probably be

qx.ui.layout.Grow()