带有虚拟列表的 qooxdoo 中的无限滚动答案

【问题标题】：Infinite scroll in qooxdoo with virtual list带有虚拟列表的 qooxdoo 中的无限滚动
【发布时间】：2014-01-30 12:45:08
【问题描述】：

我创建了一个虚拟列表，当用户在列表顶部或底部滚动时，新数据会添加到虚拟列表的模型中。这似乎工作正常。我的问题是虚拟列表的项目具有不同的高度，因此我需要它们能够在它们出现在用户屏幕上之后或之前配置它们自己的行高。为此，我在绑定委托中添加以下代码

item.addListenerOnce("appear", function() {
            var height = item.getSizeHint().height;
            pane.getRowConfig().setItemSize(id, height);
          }, this);

这似乎对列表中的大多数项目都有效，但有些项目根本没有触发出现事件。

这是操场上的代码http://tinyurl.com/q94dhlz

【问题讨论】：

标签： javascript qooxdoo

【解决方案1】：

您可以使用与 VirtualTree 相同的技术来调整行宽。这个想法是等到 WidgetCell 层完成渲染。这将通过事件通知。然后向图层询问所有可见行并调整这些小部件的高度。但出于性能原因，请执行此异步操作：

qx.Class.define('my.List', {
  extend: qx.ui.list.List,

  members:
  {
    syncWidget : function(jobs)
    {
      qx.log.Logger.debug("syncWidget");

      var firstRow = this._layer.getFirstRow();
      var rowSize = this._layer.getRowSizes().length;

      for (var row = firstRow; row < firstRow + rowSize; row++)
      {
        var widget = this._layer.getRenderedCellWidget(row, 0);
        if (widget != null)
        {
          var height = widget.getSizeHint().height;
          qx.log.Logger.debug("height: " + height + " row:" + row + " widget: " + widget.getDay())
          this.getPane().getRowConfig().setItemSize(row, height);
        }
      }
    },

    _initLayer : function()
    {
      this.base(arguments);
      this._layer.addListener("updated", this._onUpdated, this);
    },

    _onUpdated : function(event)
    {
      if (this.__deferredCall == null) {
        this.__deferredCall = new qx.util.DeferredCall(function() {
          qx.ui.core.queue.Widget.add(this);
        }, this);
      }
      this.__deferredCall.schedule();
    }
  }
});

这是操场上的代码http://tinyurl.com/qcy8a7c

【讨论】：

我想知道这是否适用于我的情况：stackoverflow.com/questions/24294316/…
@V3ss0n 是的，您可以使用此机制来动态加载部分数据。但是当用户加载大量数据时，性能影响仍然存在。
谢谢克里斯蒂安。但是当用户加载大量数据时，如果我们可以加载块，假设 1000 在视图中，1000 在缓存中，在滚动时删除缓存（就像 remotetablemodel 一样）？
@ChristianHagendorn 微小的 url 链接不再起作用，你能再给我一个例子吗？我想测试一下。
@ChristianHagendorn 很好的答案，为我节省了很多时间！