Extjs5 - UI 客户端 GRID 分页

Question

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

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

title : Books,

store : 'Book',

multiSelect: true,

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

columns: [
        {text: "Select", dataIndex: 'Selected', xtype: 'checkcolumn', width:25},
        {text: "Book Number", width: 55, dataIndex: bookNumber, sortable: true},
        {text: "Received", width: 50, dataIndex: 'receivedDate', sortable: true, renderer: render_date},
],      
dockedItems:
[
    { xtype: 'pagingtoolbar',
        dock: 'bottom',
        displayMsg: '{0} - {1} of {2}',
        emptyMsg: 'No data to display',
        store: 'Book',
        displayInfo: true
    }
],
forceFit: true,
height:210,
split: true,
region: 'north'
});

商店：

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'}
]
});

单击手风琴面板中的选项即可调用存储。

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

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

{"total":40,"success":true,"bookOrders":[{"bookNumber":"11111","re​​ceivedDate":null},{"bookNumber":"222222","re​​ceivedDate":空}]}

Answer 1

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

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

---

{
"total": 40,
"success": true,
"bookOrders": [{
    "bookNumber": "11111",
    "receivedDate": null
}, {
    "bookNumber": "222222",
    "receivedDate": null
}]
}

在您的模型定义中也是如此。您的所有字段都应与相同案例的响应相同。

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）：

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
    }],
    // ...
});