具有虚拟列表的qooxdoo无限滚动

Question

我创建了一个虚拟列表，当用户在列表的顶部或底部滚动时，就会在虚拟列表的模型中添加新的数据。这看起来挺好的。我的问题是虚拟列表中的项目没有相同的高度，所以我需要它们能够在它们出现在用户屏幕之后或之前配置行高度。为此，我在绑定委托中添加了以下代码

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

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

以下是操场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();
    }
  }
});

以下是操场http://tinyurl.com/qcy8a7c中的代码