2

我正在基于 ajax 调用在 qooxdoo 桌面应用程序中动态创建内容。我正在创建的一些内容中有很多小部件（大约 200 多个）。

我用谷歌浏览器做了一些分析，看起来大部分处理时间都被布局管理器占用了，因为我在容器上为我创建的每个小部件调用 add()。

有没有办法在我添加所有小部件时暂停布局管理器，然后让它在最后运行一次？

是否有更好的方法可以将大量小部件动态添加到容器中？

这是我正在做的一个例子：

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;
});
4

2 回答 2

1

你大概可以

  1. 首先将所有小部件添加到“未附加”容器中，即尚未添加到任何地方或其上级不属于布局的容器

  2. 然后将“未附加”容器添加到布局中，触发小部件布局

于 2012-09-19T19:00:29.067 回答
0

添加小部件时，它会被添加到线程结束后执行的队列中，如果在同一线程上添加多个小部件，则布局重排将执行一次。

因此，如果一个 .add() 和下一个 .add() 之间没有异步，它们就在同一个线程上，并且只进行一次回流。

您在配置文件上看到的时间是布局管理器渲染的正常时间，它必须访问 dom 才能知道某些元素的大小，这个操作需要很多时间，我做的最后一个配置文件更昂贵的操作是“ el.innerWidth”。

如果您想使用 Qooxdoo，我认为没有什么可做的。

于 2012-10-05T11:21:16.453 回答