每页的项目不生效[Extjs]

Question

我已经为分页编写了 extjs 代码。它向我展示了所有数据到网格中，但我设置了 itemsPerPage = 2。这里我使用了 extjs 和 Grid + Panel。我认为这是一个小错误，但我是 extjs 的新手，所以我想不通。我已经尝试过，但到目前为止没有运气。

Ext.onReady(function () {
var itemsPerPage = 2;   // set the number of items you want per page

var store   =   Ext.create('Ext.data.Store', {
    storeId: 'employeeStore',
    autoLoad: false,
    pageSize: itemsPerPage, 
    fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
    data: [{
        firstname: "Michael",
        lastname: "Scott"
    }, {
        firstname: "Dwight",
        lastname: "Schrute"
    }, {
        firstname: "Jim",
        lastname: "Halpert"
    }, {
        firstname: "Kevin",
        lastname: "Malone"
    }, {
        firstname: "Angela",
        lastname: "Martin"
    }],
    proxy: {
        type: 'ajax',
        url: 'example.json',  // url that will load data with respect to start and limit params
        reader: {
            type: 'json',
            root: 'blah',
            totalProperty: 'total'
        }
    }
});

// specify segment of data you want to load using params
store.load({
    params:{
        start:0,    
        limit: itemsPerPage
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Pagination',        
    store: store,       
    columns: [{
        text: 'First Name',
        dataIndex: 'firstname',
        field: 'textfield',
        flex : 1,   
    }, {
        text: 'Last Name',
        dataIndex: 'lastname',
        flex : 1,   
            field:{
                xtype:'textfield',
                allowBlank:false
            }           
    }],
    id : 'SimpleGrid',
    width: 500,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],
    renderTo: Ext.getBody()
});

});

要使用分页，请在第一次加载商店时将分页要求传递给服务器。

store.load({
params: {
    // specify params for the first page load if using paging
    start: 0,          
    limit: myPageSize,
    // other params
    foo:   'bar'
}

});

这里我使用了 extjs + Grid + Panel。

亲切的问候，

Answer 1

如果您查看对 url 字段的评论：

proxy: {
    ...
    url: 'example.json',  // url that will load data with respect to start and limit params
    ...
}

extjs 在加载所有需要的参数时向服务器发送请求。例如：example.json?start=0&limit=2&page=1 所以你应该在服务器上限制它，然后发送回 extjs

您可以在此处查看手动处理限制的工作示例。

http://jsfiddle.net/jardalu/TE4ah/