3

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

这告诉我:未捕获的 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 数据”,但网格中没有显示数据:'(。

4

3 回答 3

4

您的服务器端堆栈(PHP、.NET 等)需要了解作为请求的一部分传递的pagestart和参数。limit这就是您将用来创建正确的 SQL 查询(或为检索记录所做的任何事情)以限制结果以匹配存储所容纳的分页的内容。

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

于 2013-06-18T15:30:28.827 回答
1

这告诉我:未捕获的 TypeError: Object function constructor() { ... has no method 'load'

它告诉你这是因为你试图在“类”而不是实例上调用 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', {
于 2013-11-28T08:23:43.820 回答
0

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

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 服务。

于 2013-06-18T14:50:32.340 回答