1

我在 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"}
            ] 
}

请建议，我哪里出错了。

4

2 回答 2

0

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

于 2012-12-28T12:26:48.613 回答
0

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

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

值得庆幸的是，有一个 UX 组件可以帮助您：Ext.ux.data.PagingMemoryProxy

下面是一些示例代码，展示了它是如何工作的：Sliding Pager example

于 2013-02-07T15:48:11.053 回答