qooxdoo infinilist

infinilist-test.js

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

  members: {
    __deferredCall: null,
    __scrollBottom: false,
    __updateCount: 0,
    __resizeCount: 0,

    _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() {

          console.log("deferring")
          qx.ui.core.queue.Widget.add(this, 'updateSize');

        }, this);
      }
      this.__deferredCall.schedule();
    },
    _updateSize: function(callback) {
      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;
          var current_height = this.getPane().getRowConfig().getItemSize(row);
          if (height !== current_height) {
            this.getPane().getRowConfig().setItemSize(row, height);
            console.log("resizing")

          }

        }

      }
      callback()
    },
    _scrollBottom: function(limit) {
      var lastrow = this.getModel().length - 1;
      if (this.__scrollBottom === true) {
        this.getPane().setScrollY(1e99)
        this.scrollToY(1e99)
        console.log(lastrow)
        this.getPane().scrollRowIntoView(lastrow)
        if (this.__updateCount >= limit) {
          this.__scrollBottom = false
        }

      }
    },
    syncWidget: function(jobs) {
      var that = this
      if (jobs.scrollBottom && jobs.updateSize) {
        console.log(jobs)
        this.__scrollBottom = true
        this.__updateCount = 0
        this._updateSize(function() {
          that._scrollBottom(6)
        })
        this.__updateCount += 1

      } else if (jobs.scrollBottom) {
        this.__scrollBottom = true
        this.__updateCount = 0
      } else if (jobs.updateSize) {
        this._updateSize(function() {
          that._scrollBottom(3)
        })
        this.__updateCount += 1
      }
    }
  }
});


var rawData = [];
for (var i = 0; i < 2500; i++)
{
  rawData[i] = {
    label: "Item No " + i,
    icon: (i % 4) ? "16" : "48"
  }
}
var model = qx.data.marshal.Json.createModel(rawData);

// Creates the list and configures it
var list = this.__configList = new Mylist(model).set({
  scrollbarX: "on",
  selectionMode : "one",
  height: 280,
  width: 150,
  labelPath: "label",
  iconPath: "icon",
  iconOptions: {converter : function(data) {
    return "http://demo.qooxdoo.org/current/demobrowser/resource/qx/icon/Tango/" + data + "/places/folder.png";
  }}
});




model.addListener("change", function() {
    // qx.ui.core.queue.Manager.flush();
    qx.ui.core.queue.Widget.remove(list,"scrollBottom");
    // normally using the flush should be time enough for the renderer
    qx.ui.core.queue.Widget.add(list, "scrollBottom");
})

var that = this;

this.getRoot().add(list);

var btn1 = new qx.ui.form.Button("add new one and scroll");
this.getRoot().add(btn1, {top : 350, left : 0});
btn1.addListener("execute", function() {
  
  model.push(qx.data.marshal.Json.createModel({
    label: "LastONE",
    icon: (i % 4) ? "16" : "48"
  }));
  
}, this);