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响应 -

{＆＃34;总＆＃34; 40＆＃34;成功＆＃34;：真，＆＃34; bookOrders＆＃34;：[{＆＃34; bookNumber＆＃34;：＆＃34; 11111＆＃34;＆＃34; receivedDate＆＃34;：空}，{＆＃34; bookNumber＆＃34;：＆＃34; 222222＆＃34;＆＃34; receivedDate＆＃34;：空}]} < / p>

Answer 1

在您的代理中，您拥有＆＃39; rootProperty＆＃39;设置为＆＃39; books＆＃39;，但在服务器响应中有“booksOrders＆＃39;属性。它们应该是相同的，所以要么改变rootProperty＆＃39;值或服务器响应中该属性的名称。

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的加载方法时，没有必要添加任何参数。这应该足够了。

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

Extjs5 - UI客户端GRID分页

1 个答案: