[SOLVED] Making a good pagination for a grid

Making a good pagination for a grid - extJS

I'm new to ExtJS. I followed a tutorial with the aim to create a pagination on a grid. The code was simple, and I found it suspicious... as result, the paging toolbar is there but there are still all the data displayed on the first load. Here's my code in the View file :

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
}],

I also saw tutorial with a var, but I dont' know where to implement it. I'm sorry I know there is many tutorials about it out of there but I'm struggling on it :(, I don't mastery JS enough !

Thanks by advance ^_^

edit : My code in my Store file :

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

This is telling me : Uncaught TypeError: Object function constructor() { ... has no method 'load'

I tried to remove the store.load, and add {start: 0, limit: 2} after the AutoLoad, according with this http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.toolbar.Paging.html

With this method, the toolbar shows me " 2-13 data displayed " as it should but there is not data displayed in the grid :'(.

Solution

Your server-side stack (PHP, .NET, whatever) will need to be aware of the page, start, and limit parameters that are passed through as part of the request. This is what you'll use to create the proper SQL query (or whatever is being done to retrieve the records) to limit the results to match the paging accommodated by the store.

I'm guessing you're getting all the results because your app server is sending back all the results. The paging provided by ExtJS is really just a handshake with whatever code is running on the server...the paging in a remote store isn't limiting the records, your server-side code is. The AJAX request that the store's proxy sends merely tells the server what it expects to receive back as data.