The remote table should be used whenever you want to show large amount of data in a performant way.

As this table model loads its data on-demand from a backend, only those rows are loaded that are near the area the user is currently viewing. If the user scrolls, the rows he will see soon are loaded asynchroniously in the background. All loaded data is managed in a cache that automatically removes the last resently used rows when it gets full.

To get this model up and running you have to implement the actual loading of the row data by yourself in a subclass.

For the correct implementation of the remote table model you have to define/overwrite two methods _loadRowCount and _loadRowData. Both are automatically called by the table widget.

qx.Class.define("myApplication.table.RemoteDataModel",
{
  extend : qx.ui.table.model.Remote,
 
  members :
  {
     // overloaded - called whenever the table requests the row count
    _loadRowCount : function()
    {
      // Call the backend service (example) - using XmlHttp 
      var url  = "http://localhost/services/getTableCount.php";
      var req = qx.io.remote.Request(url, "GET", "application/json");
 
      // Add listener
      req.addListener("completed", this._onRowCountCompleted, this);
 
      // send request
      req.send();
    },
 
    // Listener for request of "_loadRowCount" method
    _onRowCountCompleted : function(response)
    {
       var result = response.getContent();
       if (result != null)
       {
          // Apply it to the model - the method "_onRowCountLoaded" has to be called
          this._onRowCountLoaded(result);
       }
    },
 
   
    // overloaded - called whenever the table requests new data
    _loadRowData : function(firstRow, lastRow)
    {
       // Call the backend service (example) - using XmlHttp 
       var baseUrl  = "http://localhost/services/getTableRowData.php";
       var parameters = "?from=" + firstRow + "&to=" + lastRow;
       var url = baseUrl + parameters;
       var req = qx.io.remote.Request(url, "GET", "application/json");
 
       // Add listener
       req.addListener("completed", this._onLoadRowDataCompleted, this);      
  
       // send request
       req.send();
    },
 
     // Listener for request of "_loadRowData" method
    _onLoadRowDataCompleted : function(response)
    {
        var result = response.getContent();
       if (result != null)
       {
          // Apply it to the model - the method "_onRowDataLoaded" has to be called
          this._onRowDataLoaded(result);   
       }        
    }
  }
});

The backend has to deliver the requested data in a JSON data structure in order to display the data correctly. The data structure has to use the same IDs as the remote table model instance at the client-side uses.

For example

var remoteModel = new myApplication.table.RemoteDataModel();
 
// first param: displayed names, second param: IDs
remoteModel.setColumns( [ "First name", "Last name" ], [ "first", "last" ] );

Then the data delivered by the backend should have the following structure:

result = {[  
  { "first" : "John", "last" : "Doe"  },
  { "first" : "Homer", "last" : "Simpson"  },
  { "first" : "Charlie", "last" : "Brown"  },
  ...
]};

This short and very basic example is far from complete and in your application you have to implement some more features like error-handling, but it should give you a short overview of how to implement the remote table model in qooxdoo.

Another basic implementation which uses the PHP RPC backend is available at the qooxdoo contrib sections. Take a look at the RPCExample and setup the necessary RPC PHP backend.