CODEWITHSUNDEEP
javascriptextjssencha-touch
PedroD
PedroD

Reputation: 6053

How to create pagination on Sencha Ext.data.Store?

I am trying to create a table with pagination, and it seems that it must be done using the Ext.data.Store. So I create one in the following way:

    /*
     createStore - setup an ExtJS dataStore and populate it using the view's collection
     @param n/a
     @return object store
     */
    createStore: function() {
        var _this = this;
        if (!this.store) {
            this.store = Ext.create('Ext.data.Store', {
                pageSize: 3,
                data: _this.collection.toJSON()
            });
        }
        return this.store;
    },

The collention being passed as data (the _this.collection.toJSON()) is the following:

    [
      {
        "id": 1,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 2,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 3,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 4,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 5,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 6,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 7,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 8,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 9,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 10,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 11,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 12,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 13,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 14,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 15,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 16,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 17,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 18,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 19,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 20,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      },
      {
        "id": 21,
        "value": 12.34,
        "currency": "eur",
        "expirationDate": "Mon Jul 27 2016 12:01:11 GMT+0100 (WEST)",
        "vendor": "banana",
        "activationCode": 1234567890
      }
    ]

However in the final result table ExtJS does not limit the result to only 3 results per page.

enter image description here

I have searched the documentation and googled a lot and I have come to nowhere. I have also seen people using a proxy option to receive the data, and to perform modifications to the server in order to make the server support pagination.

I cannot do that here, the data I receive comes this way and this way it will be until the end because I cannot change the server. Moreover, it is wrong to change the backend server's logic because of front-end GUI details.

What can I do? This should be straight forward. The Store object has all the data it needs to display, it just needs to split it into pages, that is nothing out of this world, if the only way of doing this is by modifying the server then I don't know...

Upvotes: 0

Views: 181

Answers (1)

yorlin
yorlin

Reputation: 440

Hi, actually Extjs doesn't do paging, you should care about data portions by yourself.

http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.toolbar.Paging

Paging is typically handled on the server side (see exception below). The client sends parameters to the server side, which the server needs to interpret and then respond with the appropriate data.

There is also Paging with Local Data section, but it looks like it is something old.

The best practice will be to have some server side, that will generate data portions based on provided parameters.

Upvotes: 1

Related Questions