为网格制作良好的分页 - 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
}
});

这告诉我：未捕获的类型错误：对象函数构造函数（）{...没有方法“加载”

我尝试删除 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

这告诉我：未捕获的类型错误：对象函数构造函数（） { ...没有方法“加载”

它告诉您这一点的原因是因为您试图在“类”而不是实例上调用 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）。如果他们将页面信息（页面和页面大小）添加到用户请求中，那么您的 Ext Js 代码是正确的。当然，您还需要一个支持分页并提供请求的数据块的 Web 服务。