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

score 4 · Accepted Answer · answered Feb 07 '14 at 10:50

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

I am wondering can this apply to my case : http://stackoverflow.com/questions/24294316/how-can-i-make-qooxdoo-virtual-list-scalable — Phyo Arkar Lwin, Jun 18 '14 at 20:21
@V3ss0n yes, you could use this mechanism to dynamically load the your data in parts. But when the user loads a big amount of data, the performance impact will remain. — Christian Hagendorn, Jun 20 '14 at 07:54
Thanks Christian. But when the user loads a big amount of data , if it possible if we load in chunk , lets say 1000 in view , 1000 in cache , remove cache as scrolled (like remotetablemodel does) ? — Phyo Arkar Lwin, Jun 20 '14 at 15:43
@ChristianHagendorn The tiny url links no longer works , can you give me the example again? I want to test it. — Phyo Arkar Lwin, Sep 25 '14 at 12:06

Infinite scroll in qooxdoo with virtual list

1 Answers1

Linked