EXTJS4-分页在网格中不正确答案

【问题标题】：EXTJS4- pagination is not proper in the gridEXTJS4-分页在网格中不正确
【发布时间】：2013-04-10 07:05:25
【问题描述】：

我在 store 中设置了 pagesize，在代理设置中设置了 totalproperty，还定义了 dockedItems 配置。但是在页面中，显示的是所有记录，而不是指定的pagesize。这是我的代码：

js文件：

var sm = Ext.create('Ext.selection.CheckboxModel'); 
    Ext.define('SuperUser', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'fname', type: 'string' },
            { name: 'lname', type: 'string' },
            { name: 'email', type: 'string' },
            { name: 'uid', type: 'string' },
            { name: 'isSup', type: 'boolean' },
            { name: 'upDate', type: 'string' },
            { name: 'upBy', type: 'string' }
        ]
    });
  //Create the grid
    var superGrid=Ext.define('supusergrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.supusergrid',
    title: 'Super Admin Grid',
    gridId:'grid',
    model:'SuperUser',
    store: Ext.create('Ext.data.Store', {
        storeId: 'supUserStore',
         pageSize: 3,
        model:'SuperUser',
        autoLoad: true,
            proxy: { 
                type: 'ajax',
                url : 'supUserStore.json',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty:'total' 
                    } 
                }
    }),
    selModel: sm,
    columns: [
              { 
                  header: 'First Name',
                  dataIndex: 'fname' 
            },
              {
                header: 'Last Name', 
                dataIndex: 'lname' 
                },
              { 
                    header: 'Email', 
                    dataIndex: 'email'
                    },
              { 
                        header: 'User ID', 
                        dataIndex: 'uid' 
                        },

             {
                 header: 'Super Admin', 
                 dataIndex: 'isSup'
                 },
              { 
                     header: 'Updated Date',
                     dataIndex: 'upDate',

                     },
              { 
                         header: 'Updated By',
                         dataIndex: 'upBy'
                         }
          ],
          dockedItems: [{
              xtype: 'pagingtoolbar',
              store: Ext.data.StoreManager.lookup('supUserStore'),   
              dock: 'bottom',
              displayInfo: true
          }],
    initComponent: function () {
        this.callParent(arguments);

    }
});
    Ext.onReady(function () {
        Ext.widget('supusergrid', {

            renderTo: 'div1'
        });
    });

json 文件：

{
    "success": true,
    "total": 12,
    "data":  [
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com"}
            ] 
}

请提出建议，我哪里出错了。

【问题讨论】：

尝试在您的网格之前创建您的商店。我猜查找失败，因为它还没有创建。
您好 asgoth，感谢您的回复！好吧，如果我在grid之前创建store，如下，问题没有解决。部分代码如下：var supUserStore=Ext.create('Ext.data.Store', { storeId: 'supUserStore', pageSize: 3、model:'SuperUser', autoLoad: true, }); //创建网格 var superGrid=Ext.define('supusergrid', { extend: 'Ext.grid.Panel', alias: 'widget.supusergrid', title: 'Super Admin Grid', gridId:'grid', model :'SuperUser', store: Ext.data.StoreManager.lookup('supUserStore'), selModel: sm,
尝试在initComponent中添加：supUserStore.loadPage(1);
你能为这段代码创建一个jsFiddle吗？
这里是路径：jsfiddle.net/ctvkY 除了使用上面的JSON文件。

标签： extjs extjs4

【解决方案1】：

您使用的是Ajax proxy。在您的服务器上，您可以拦截请求参数页面、启动和限制。然后使用页面数据创建一个 json 响应。

【讨论】：

我在这里没有使用任何服务器端代码。对 JSON 文件进行硬编码。

【解决方案2】：

商店分页并不像您想象的那么聪明。仅仅因为你告诉它页面大小是 3 条记录并且你总共有 12 条记录并不意味着它会为你将所有内容分成 4 个漂亮的页面。

当调用store.loadPage 时，商店将start 和limit 参数添加到代理请求中。当响应返回时，它假定您已正确限制结果集并加载提供的所有记录。您有责任使用这些参数来限制返回到商店的结果。通常，这需要将数据发布到服务器上，以便您可以利用这些参数。

谢天谢地，有一个 UX 组件可以帮助您：Ext.ux.data.PagingMemoryProxy

这里有一些示例代码展示了它是如何工作的：Sliding Pager example

【讨论】：