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

这告诉我：未捕获的TypeError：对象函数构造函数（）{...没有方法'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查询（或正在执行的任何检索记录）以限制结果以匹配商店所容纳的分页。

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

Answer 2

这告诉我：未捕获的TypeError：对象函数构造函数（） {...没有方法'加载'

它告诉你的原因是因为你试图在'class'而不是实例上调用load（）方法：

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

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

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

这应该在定义'class'之后但在你调用load之前发生。

也许你应该习惯将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）。如果他们将页面信息（page和pageSize）添加到Users-requests，那么您的Ext Js代码是正确的。当然，您还需要一个支持分页的Web服务，并提供所请求的数据块。

为网格做好分页 - extJS

3 个答案: