Pagination Extjs5-UI客户端网格分页

我在Grails2.4.4中使用ExtJs5。我希望在Extjs网格上进行客户端分页，而不调用服务器端。我浏览了很多论坛，寻找客户端分页的输入信息，但我在任何地方都能看到要使用的内存代理。我正在使用Ajax代理调用grails控制器并加载存储。你能帮我解决这个问题，并提供指针让客户端分页工作吗？ 请在下面找到我的代码。我对extjs完全陌生。因此，如果有一些基本错误，请道歉。 视图：

商店：

Ext.define('MVC.store.Book', {
extend  : 'Ext.data.Store',

requires : [
    'MVC.model.Book'
],
config: {
storeId : 'Book',
model   : 'MVC.model.Book',
pageSize : 5,
proxy: {
    type: 'ajax',
    url: '/Book/getBooks',
    actionMethods :{
        read   : 'POST'
        },
    reader: {
        type: 'json',
        rootProperty: 'books',
        totalProperty: 'total'
    }
}  
}

});

型号：

Ext.define('MVC.model.Book', {
extend: 'Ext.data.Model',    
fields: [
    { name: 'Selected', type: 'bool' },
    { name: 'BookNumber', type: 'string' },
    { name: 'Received', type: 'date'}
]
});

在accordion面板中单击一个选项时调用Store

var store = Ext.getStore('Book');
store.load({
params: {
   start: 0,
   limit: 5
}
});

服务器对上述ajax调用的JSON响应-

{“total”：40，“success”：true，“bookOrders”：[{“bookNumber”：“11111”，“receivedDate”：null}，{“bookNumber”：“222222”，“receivedDate”：null}

---

在代理中，您将“rootProperty”设置为“books”，但在服务器响应中有“booksOrders”属性。它们应该相同，因此在服务器响应中更改“rootProperty”值或该属性的名称

proxy: {
    type: 'ajax',
    url: '/Book/getBooks',
    actionMethods :{
        read   : 'POST'
        },
    reader: {
        type: 'json',
        rootProperty: 'bookOrders', // here
        totalProperty: 'total'
    }
}

---

在模型定义中也是如此。您的所有字段都应该与响应相同大小写的字段相同

Ext.define('MVC.model.Book', {
    extend: 'Ext.data.Model',    
    fields: [
        { name: 'Selected', type: 'bool' }, // nu such field in your response
        { name: 'bookNumber', type: 'string' },
        { name: 'receivedDate', type: 'date'}
    ]
});

调用store的load方法时，也不需要添加任何参数。这应该足够了

store.load();

更新

如果您可以控制后端，那么您应该编写一个逻辑来返回所选页面。如果没有，请尝试添加另一个链接存储（

PagedBook

）：

---

嗨，Alexey，我已经做了上述更改，但商店的所有记录仍在加载中。我希望存储区具有所有记录，但仅按页面大小显示指定的行。是否可以在Ext.grid.Panel中进行客户端分页？

Ext.define('MVC.model.Book', {
    extend: 'Ext.data.Model',    
    fields: [
        { name: 'Selected', type: 'bool' }, // nu such field in your response
        { name: 'bookNumber', type: 'string' },
        { name: 'receivedDate', type: 'date'}
    ]
});

store.load();

Ext.define('MVC.store.PagedBook', {
    extend: 'Ext.data.ChainedStore',
    requires: [
        'MVC.store.Book' // ***
    ],
    storeId: 'PagedBook',
    model: 'MVC.model.Book',
    pageSize: 5,

    source: 'Book', // ***
    loadPage: function(page) { // DIDN'T TEST IT WELL, MAY WORK INCORRECT ***
        var i = 0,
            pageSize = this.getPageSize();

        this.clearFilter();
        this.filterBy(function(rec) {
            var result = i >= (page - 1) * pageSize && i < page * pageSize;
            i = i + 1;
            return result;
        });
    }

});

Ext.define('MVC.GridPanel', {
    alias: 'app.gridPanelAlias',
    extend: 'Ext.grid.Panel',
    xtype: 'BookView',

    title: Books,

    store: 'PagedBook',                 // ***

    multiSelect: true,

    requires: ['Ext.grid.column.CheckColumn'],

    // ...
    dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        displayMsg: '{0} - {1} of {2}',
        emptyMsg: 'No data to display',
        store: 'PagedBook',             // ***
        displayInfo: true
    }],
    // ...
});