2015-10-01 35 views
0

我想创建一个表与分页,它似乎必须使用Ext.data.Store完成。所以,我在下面的方式创建一个:如何在Sencha 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被作为数据(_this.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个结果。

enter image description here

我已搜查the documentation和google搜索了很多,我是来无处。我还看到有人使用代理选项来接收数据,并对服务器执行修改以使服务器支持分页。

我不能这样做,我收到的数据是这样的,这种方式直到最后,因为我无法更改服务器。而且,由于前端GUI详细信息,错误更改后端服务器的逻辑。

我该怎么办?这应该是直截了当的。 Store对象具有需要显示的所有数据,只需将其分成多个页面即可,如果这样做的唯一方法是修改服务器,那么我不知道......

回答

1

嗨, 实际上Extjs不会做分页,你应该关心你自己的数据部分。

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

寻呼是在服务器侧通常处理(见下文除外)。客户端将参数发送到服务器端,服务器需要解释这些参数,然后用适当的数据进行响应。

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

最好的做法是有一些服务器端,它会根据提供的参数生成数据部分。