My problem is about showing N (N > 10000) records chosen randomly in a grid panel with an appropriate page size.

I have a store that remotely fetches some sort of data from a server. There is an Ext.grid.Panel object whose store is that store and it also has a paging toolbar with the same store. The code excerpt is as follows. It is incomplete so ignore the details.

      var store = Ext.create("Ext.data.Store", {
          model: "Some model",
          proxy: {
              type: "ajax",
              url: someUrl,
              reader: {
                  type: "json",
                  root: "models",
                  totalProperty: "total"
          autoLoad: false,
          autoSync: false,
          pageSize: 10,
          remoteSort: false

      var gridPanel = Ext.create("Ext.grid.Panel", {
          store: store,
          autoDestroy: false,
          columns: [{
              header: "Username",
              dataIndex: "username",
              flex: 1
          dockedItems: [{
              xtype: 'pagingtoolbar',
              store: store,
              dock: 'bottom',
              displayInfo: true
The problem is that the data used by the store is collected with a bunch of queries including "ORDER BY RAND" clause. Thus, every time the user clicks for another page in the grid, the server selects 10 (pageSize) records randomly and give them to the client. This causes undesirable and undetermined data to be shown at that page.

One possible solution is to fetch all the data with an ajax request at once and then store it in a local store. But, if the data is too large (let's say 10000 records), this will crash.

Actually, I am trying to mimic the usage of selecting N records randomly and remotely and then showing them in a grid panel with the paging ability.

Any ideas on how to do it would be appreciated.

Thanks for reading.