每页的项目没有生效[Extjs]

时间:2014-10-09 14:17:04

标签: javascript extjs pagination extjs4

我已经为分页编写了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。

亲切的问候,

1 个答案:

答案 0 :(得分:0)

如果你看一下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/