2

I am dynamically creating content in a qooxdoo desktop application based on ajax calls. Some of the content I am creating has a lot of widgets in it (on the order of 200+).

I did some profiling with google chrome and it looks like most of the processing time is taken up by the layout manager since I am calling add() on the container for every widget I create.

Is there a way to pause the layout manager while I add all the widgets and then have it run once at the very end?

Is there a better approach altogether for dynamically adding lots of widgets to containers?

Here is an example of what I am doing:

var container = new qx.ui.container.Composite(new qx.ui.layout.Flow());

var groupbox = new qx.ui.groupbox.GroupBox();
groupbox.setLayout(new qx.ui.layout.Grid(10, 10));
container.add(groupbox);

// loop through data received from AJAX call and add it to the group box
var row = 0;
data.each(function(pair) {
    var label = new qx.ui.basic.Label(pair.key);
    var field = new qx.ui.form.TextField(pair.value);
    groupbox.add(label, {row: row, column: 0});
    groupbox.add(field, {row: row, column: 1});
    ++row;
});
Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
user1681683
  • 21
  • 1

2 Answers2

1

You can probably

  1. first add all the widgets into a "unattached" container, i.e. a container which has not been added anywhere yet or its ascendants are not part of the layout

  2. then add the "unattached" container to the layout, triggering the widget layouting

geonik
  • 181
  • 7
  • Good thought but it didn't work. I moved the line "container.add(groupbox);" below the loop and unfortunately there was no improvement in load time. – user1681683 Sep 19 '12 at 19:53
  • I always thought, the layout manager got activated by a timer and not via add ... so that while you are in code, it would not get active anyway. – Tobi Oetiker Sep 20 '12 at 06:16
0

When you add a widget, it is added to a queue to be executed after you thread ends, if you add many widgets on the same thread, the layout reflow will be executed once.

So if there is no asynchrony between one .add() and the next one they are on the same thread and they do only one reflow.

The time you see on the profile is the normal time the layout manager takes to render, it has to access to the dom to know the size of some elements and this operation takes a lot, the last profile I did the more expensive operation was "el.innerWidth".

I think there is nothing to do there if you want to use Qooxdoo.

A. Matías Quezada
  • 1,886
  • 17
  • 34