Choosing optimal layouts for resizeable windows in qooxdoo
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 hidde开发者_JAVA百科n
// 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?
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()
精彩评论