extjs - 为网格制作良好的分页 - extJS

Question

我是 ExtJS 的新手。 我遵循了一个教程，目的是在网格上创建分页。 代码很简单，我发现它很可疑...... 结果，分页工具栏在那里，但在第一次加载时仍然显示所有数据。 这是我在 View 文件中的代码:

Ext.define('AM.view.user.List' ,{


extend: 'Ext.grid.GridPanel',

alias: 'widget.userlist',

cls: 'overall', 

title: 'xxx <img src="ressource/image/xxx.png" class="title-icon" style= "width: 5%; height: 5%; vertical-align:middle; margin-bottom:0px;" />',

columnLines: true,

dockedItems: [{
    xtype: 'pagingtoolbar',
    store: 'Users',
    pageSize: 2,
    dock: 'bottom',
    displayInfo: true
}],

我也看到了带有 var 的教程，但我不知道在哪里实现它。 抱歉，我知道那里有很多关于它的教程，但我正在努力:(，我对 JS 的掌握还不够!

提前致谢^_^

编辑: 我的商店文件中的代码:

var itemsPerPage = 2;
var store = Ext.define('AM.store.Users', {

pageSize: itemsPerPage,
extend: 'Ext.data.Store',
model: 'AM.model.User',


proxy: {
    type: 'ajax',

api: {
    read: 'application/data/users.json',
    update: 'application/data/updateUsers.json',
    },
    reader: {
        type: 'json',
        root: 'users',
    idProperty: 'POC',
        successProperty: 'success',
    totalProperty : 'total'
    }
},
autoLoad: false,

});

store.load({
params:{
   start:0,    
   limit: itemsPerPage
}
});

这告诉我:Uncaught TypeError: Object function constructor() { ... has no method 'load'

我尝试删除 store.load，并在 AutoLoad 之后添加 {start: 0, limit: 2}，根据此 http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.toolbar.Paging.html

使用这种方法，工具栏会显示“显示 2-13 个数据”，但网格中没有显示数据 :'(。

Answer 1

您的服务器端堆栈(PHP、.NET 等)需要知道page、start 和limit作为请求的一部分传递的参数。这是您将用来创建正确的 SQL 查询(或检索记录的任何操作)以限制结果以匹配商店容纳的分页的内容。

我猜您得到了所有结果，因为您的应用服务器正在发回所有结果。 ExtJS 提供的分页实际上只是与服务器上运行的任何代码的握手……远程存储中的分页不限制记录，您的服务器端代码才是。商店代理发送的 AJAX 请求只是告诉服务器它希望接收回什么数据。