Table width issue

classic Classic list List threaded Threaded
3 messages Options
flj
Reply | Threaded
Open this post in threaded view
|

Table width issue

flj
Hi.

I have created a tabview with two pages, a table and three buttons below it in each page:

var model = new qx.ui.table.model.Simple();
model.setColumns(["ID", "Type", "Title"]);
var t1 = new qx.ui.table.Table(model);
t1.getTableColumnModel().setColumnVisible(0, false);

model = new qx.ui.table.model.Simple();
model.setColumns(["ID", "Name", "Type", "Title"]);
var t2 = new qx.ui.table.Table(model);
t2.getTableColumnModel().setColumnVisible(0, false);

var tabs = new qx.ui.tabview.TabView("top");
var p1 = new qx.ui.tabview.Page("t1");
var p2 = new qx.ui.tabview.Page("t2");
tasks.setLayout(new qx.ui.layout.Grid());
settings.setLayout(new qx.ui.layout.Grid());
tabs.add(p1);
tabs.add(p2);
p1.add(t1, {row: 0, column: 0, colSpan: 3});
p1.add(btnNew1, {row: 1, column: 0});
p1.add(btnEdit1, {row: 1, column: 1});
p1.add(btnDelete1, {row: 1, column: 2});
p2.add(t2, {row: 0, column: 0, colSpan: 3});
p2.add(btnNew2, {row: 1, column: 0});
p2.add(btnEdit2, {row: 1, column: 1});
p2.add(btnDelete2, {row: 1, column: 2});

My problem is that the above code makes the table render on only part of the width of the pages. The table gets a scroll bar below for horizontal scrolling, but does not get expanded over the whole width of the page.

I cannot use absolute positioning and dimensioning, since the layout has to adapt to various browser window sizes.

What am I doing wrong in the code above? How can I make the tables expand over the whole width of the pages they contained by? Maybe use a VBox layout, add a composite with layout grow, then a composite with layout HBox below, in which to add the buttons? Isn't this too complicated?

br,

flj

------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Table width issue

Fabian Jakobs
Administrator
Hi,

> var model = new qx.ui.table.model.Simple();
> model.setColumns(["ID", "Type", "Title"]);
> var t1 = new qx.ui.table.Table(model);
> t1.getTableColumnModel().setColumnVisible(0, false);
>
> model = new qx.ui.table.model.Simple();
> model.setColumns(["ID", "Name", "Type", "Title"]);
> var t2 = new qx.ui.table.Table(model);
> t2.getTableColumnModel().setColumnVisible(0, false);
>
> var tabs = new qx.ui.tabview.TabView("top");
> var p1 = new qx.ui.tabview.Page("t1");
> var p2 = new qx.ui.tabview.Page("t2");
> tasks.setLayout(new qx.ui.layout.Grid());
> settings.setLayout(new qx.ui.layout.Grid());
> tabs.add(p1);
> tabs.add(p2);
> p1.add(t1, {row: 0, column: 0, colSpan: 3});
> p1.add(btnNew1, {row: 1, column: 0});
> p1.add(btnEdit1, {row: 1, column: 1});
> p1.add(btnDelete1, {row: 1, column: 2});
> p2.add(t2, {row: 0, column: 0, colSpan: 3});
> p2.add(btnNew2, {row: 1, column: 0});
> p2.add(btnEdit2, {row: 1, column: 1});
> p2.add(btnDelete2, {row: 1, column: 2});
>  
By default the grid layout doesn't grow horizontally unless at least one
of the columns is flexible. You can do this using the "setColumnFlex()"
method on the grid layout:

var layout = new qx.ui.layout.Grid();
layout.setColumnFlex(0, 1); // make the first column flexible
tasks.setLayout(layout);


This should do the trick. Which column to make flexible depends on you
desired layout..

Best Fabian

--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG - Web Technologies
Ernst-Frey-Straße 9 · DE-76135 Karlsruhe
Telefon: +49 721 91374-6784
[hidden email]

Amtsgericht Montabaur / HRB 6484
Vorstände: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Robert Hoffmann, Markus Huhn, Hans-Henning Kettler, Dr. Oliver Mauss, Jan Oetjen
Aufsichtsratsvorsitzender: Michael Scheeren


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
flj
Reply | Threaded
Open this post in threaded view
|

Re: Table width issue

flj
In reply to this post by flj
Hi.

> By default the grid layout doesn't grow horizontally unless at least one
> of the columns is flexible. You can do this using the "setColumnFlex()"
> method on the grid layout:
>
> var layout = new qx.ui.layout.Grid();
> layout.setColumnFlex(0, 1); // make the first column flexible
> tasks.setLayout(layout);
>
>
> This should do the trick. Which column to make flexible depends on you
> desired layout..

Thanks, tried it, it works.

flj


------------------------------------------------------------------------------
Come build with us! The BlackBerry(R) Developer Conference in SF, CA
is the only developer event you need to attend this year. Jumpstart your
developing skills, take BlackBerry mobile applications to market and stay
ahead of the curve. Join us from November 9 - 12, 2009. Register now!
http://p.sf.net/sfu/devconference
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel