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

Question

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

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 请求只是告诉服务器它期望接收回的数据。

Answer 2

这告诉我：Uncaught TypeError: Object function constructor() { ... 没有“加载”方法

它告诉你这是因为你试图在“类”而不是实例上调用 load() 方法：

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

Ext.define 定义一个类。要获取实例，您应该调用Ext.create：

var store = Ext.create('AM.store.Users', { /* ... */ });

这应该发生在定义“类”之后，但在调用加载之前。

也许您应该养成将 Ext.define 的结果存储在名称以大写字母开头的变量中的习惯，这样您就可以看到它代表一个类而不是一个实例：

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

Answer 3

网格中的分页需要缓冲存储。像这样的

Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',

// snip
buffered: true,
pageSize: 5
// snip

proxy: {
    type: 'ajax',
api: {
    read: 'application/data/users.json',
    update: 'application/data/updateUsers.json',
    },
    reader: {
        type: 'json',
        root: 'users',
    idProperty: 'POC',
        successProperty: 'success',
        totalProperty: 'yourTotalProperty'
    }
}

});

检查发出的请求（chrome 开发者工具、firebug 或 fiddler）。如果他们将页面信息（页面和 pageSize）添加到用户请求，那么您的 Ext Js 代码是正确的。当然，您还需要一个支持分页并传递请求的数据块的 Web 服务。