Infinite scroll in qooxdoo with virtual list

Question

I have create a virtual list that when the user scroll on top or at the bottom of the list, then new data is added in the model of the virtual list. This seems to work fine. My problem is that the items of the virtual list have not the same height, so I need them to be able to configure the row height them self after or before they appear on the user screens. To accomplish that, I add the following code in the bind delegate

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

This seems to do the trick for the most of the items in the list, but there are some items that are not triggering the appear event at all.

Here is the code in the playground http://tinyurl.com/q94dhlz

Answer 1

You can use the same technique like the VirtualTree uses to adapt the row width. The idea is to wait until the WidgetCell layer has done the rendering. This will be notified with an event. Than ask the layer for all visible rows and adapt the height for these widgets. But do this asynchronous for performance reasons:

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

Here is the code in the playground http://tinyurl.com/qcy8a7c