javascript - 如何在 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;
    },

作为数据传递的 collention(_th​​is.collection.toJSON())如下:

    [
      {
        "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个结果。

我搜索了 the documentation 并用谷歌搜索了很多，但一无所获。我还看到人们使用代理选项来接收数据，并对服务器进行修改以使服务器支持分页。

我不能在这里这样做，我收到的数据会以这种方式出现，直到最后都会这样，因为我无法更改服务器。而且，因为前端GUI细节而改变后端服务器的逻辑是错误的。

我能做什么？这应该是直截了当的。 Store 对象拥有它需要显示的所有数据，它只需要将其分割成页面，这没什么特别的，如果做到这一点的唯一方法是修改服务器，那么我不知道......

Answer 1

嗨，其实Extjs不做分页，你应该自己关心数据部分。

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.

还有使用本地数据分页部分，但它看起来像是旧的东西。

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