如何在Sencha Ext.data.Store上创建分页？

Question

我正在尝试使用分页创建表，似乎必须使用Ext.data.Store来完成。 因此，我通过以下方式创建一个：

    /*
     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;
    },

作为数据（ _this.collection.toJSON（） ）传递的collention如下：

    [
      {
        "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
      }
    ]

但是，在最终结果表中，ExtJS并不将结果限制为每页3个结果。

我已经搜索了文档并在Google上搜索了很多，但我却一无所获。 我还看到人们使用代理选项来接收数据，并对服务器执行修改，以使服务器支持分页。

我在这里无法做到这一点，因为我无法更改服务器，所以接收到的数据是通过这种方式到达目的地的。 而且，由于前端GUI的详细信息，更改后端服务器的逻辑是错误的 。

我能做什么？ 这应该很简单。 Store对象具有它需要显示的所有数据，它只需要将其拆分为页面，这与世界无关，如果唯一的方式是通过修改服务器，那么我不知道...

Answer 1

嗨，实际上Extjs不会分页，您应该自己关心数据部分。

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

分页通常在服务器端处理（请参见下面的异常）。 客户端将参数发送到服务器端，服务器需要解释这些参数，然后用适当的数据进行响应。

也有“ 使用本地数据进行分页”部分，但看起来有些陈旧。

最佳实践是拥有一些服务器端，它将基于提供的参数生成数据部分。