qooxdoo虛擬列表中的無限滾動

我創建了一個虛擬列表，當用戶在列表頂部或底部滾動時，虛擬列表模型中會添加新數據。這似乎工作正常。我的問題是虛擬列表的項目高度不一樣，所以我需要他們能夠在用戶屏幕上顯示之前或之後配置自己的行高。爲了實現這個目標，我添加以下代碼在綁定委託qooxdoo虛擬列表中的無限滾動

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

這似乎做最in的列表中的項目的伎倆，但也有一些未觸發顯示事件的所有項目。

這裏是在操場上http://tinyurl.com/q94dhlz

來源

2014-01-30 Stelios Joseph Karras

您可以使用相同的技術，如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(); 
    } 
    } 
});

這裏是在操場上非常有幫助chris_schmidt感謝http://tinyurl.com/qcy8a7c

來源

2014-02-07 10:50:47

這是代碼！ –

我想知道這可以適用於我的情況：http://stackoverflow.com/questions/24294316/how-can-i-make-qooxdoo-virtual-list-scalable –

@ V3ss0n是的，你可以使用這種機制動態將您的數據分成幾部分。但是當用戶加載大量數據時，性能影響將保持不變。 –

qooxdoo虛擬列表中的無限滾動

回答

相關問題