Virtual Widgets in Qooxdoo

Qoxdoo provides the virtual widgets for certain widgets. These virtual widgets creates and renders only the visible items and updates it on demand. This improves the performance a lot, I really mean it.  If you build an enterprise application, you have to handle huge data. These virtual widgets are very helpful to handle those scenarios. Let's compare one of the widget in it's normal form and it's virtual form.

Widget:                    ComboBox
Normal ComboBox: qx.ui.form.ComboBox
Virtual CombBox:     qx.ui.form.VirtualComboBox

Firstly, Let's check the qx.ui.form.ComboBox
In the demobrowser, only 30 items are added in the default ComboBox. I took the ComboBox widget to the Playground, edited the code to add 10000 items in the default CombBox. You can observe how slow the response of the ComboBox. The loading of the page is slow and the response on click is very slow as the number of items increases. Even unloading of the page is also slow.

Now, Let's check qx.ui.form.VirtualComboBox
 In the demobrowser, only 400 items are added in the default VirtualComboBox. I took the VirtualComboBox widget to the Playground, edited the code to add 10000 items in the default VirtualCombBox. You can observe that the VirtualCombBox response is good. :)

The virtual widgets significantly reduces creation time and memory usage when visualizing even huge data sets. In addition to that, VirtualComboBox supports sorting and filtering through the delegate. Virtual List supports grouping.  Explore other virtual widgets in the DemoBrowser and Playground.

    

          // create a combo box
          var box = new qx.ui.form.VirtualComboBox();

var delegate = {
        // Inverts the order
        sorter : function(a, b) {
          return a < b ? 1 : a > b ? -1 : 0;
        },
        // Remove even-numbered items
        filter : function(item) {
          var num = parseInt(/([0-9]+)/.exec(item)[1], 10);
          return num % 2 ? true : false;
        }
      }
      box.setDelegate(delegate);