javascript - 使用虚拟列表在 qooxdoo 中无限滚动

Question

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

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

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

这是 playground 中的代码 http://tinyurl.com/q94dhlz

Answer 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();
    }
  }
});

这是 playground 中的代码 http://tinyurl.com/qcy8a7c