Not able to implement paging in ExtJS 4 Grid

Question

I am facing a problem trying to implement paging to a grid using ExtJS4. The code I implemented at the moment is the following for my app.js:

Ext.require(['Ext.data.*', 'Ext.grid.*']);

Ext.define('Pokemon', {
    extend : 'Ext.data.Model',
    fields : [ {name : 'number', type : 'int'}, 'name', 'types' ]
});

Ext.onReady(function() {

//  Ext.Msg.alert("Welcome Message", "Welcome to first example");

    var proxy = new Ext.data.proxy.Ajax({
        url: 'http://localhost:8080/rest-extjs/rest/pokedata/list',
        model: 'Pokemon',
        reader: {type: 'json'}
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'Pokemon',
        proxy: proxy,
        sorters: [{
            property : 'number'
        }]
    });

    Ext.create('Ext.grid.Panel', {
        store: store,
        loadMask: true,
        columns: [
            {text: "Number", width: 50, dataIndex: 'number'},
            {text: "Name", width: 130, dataIndex: 'name'},
            {text: "Types", width: 130, dataIndex: 'types'}
        ],
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: '{0} - {1} of {2}',
            emptyMsg: "No pokemon to display"
        }),
        renderTo:'grid',
        width: 330,
        height: 380,
    });

    store.load();

});

I wonder if the JSON needs to have a specific format, because I've been looking for examples and most of them hace additional attributes like data or totalCount. The JSON I return from a Java REST WS is the following:

[{"name":"Bulbasaur","number":1,"types":["Grass","Poison"]},{"name":"IvySaur","number":2,"types":["Grass","Poison"]},{"name":"Venasaur","number":3,"types":["Grass","Poison"]},{"name":"Charmander","number":4,"types":["Fire"]},{"name":"Charmeleon","number":5,"types":["Fire"]},{"name":"Charizard","number":6,"types":["Fire","Flying"]},{"name":"Squirtle","number":7,"types":["Water"]},{"name":"Wartortle","number":8,"types":["Water"]},{"name":"Blastoise","number":9,"types":["Water"]},{"name":"Caterpie","number":10,"types":["Bug"]},{"name":"Metapod","number":11,"types":["Bug"]},{"name":"Butterfree","number":12,"types":["Bug","Flying"]},{"name":"Weedle","number":13,"types":["Bug","Poison"]},{"name":"Kakuna","number":14,"types":["Bug","Poison"]},{"name":"Beedrill","number":15,"types":["Bug","Poison","Flying"]},{"name":"Pidgey","number":16,"types":["Normal","Flying"]},{"name":"Pïdgeotto","number":17,"types":["Normal","Flying"]},{"name":"Pidgeot","number":18,"types":["Normal","Flying"]},{"name":"Ratatta","number":19,"types":["Normal"]},{"name":"Raticate","number":20,"types":["Normal"]},{"name":"Spearow","number":21,"types":["Normal","Flying"]},{"name":"Fearow","number":22,"types":["Normal","Flying"]},{"name":"Ekans","number":23,"types":["Poison"]},{"name":"Arbok","number":24,"types":["Poison"]},{"name":"Pikachu","number":25,"types":["Electric"]},{"name":"Raichu","number":26,"types":["Electric"]},{"name":"Sandshrew","number":27,"types":["Ground"]},{"name":"Sandslash","number":28,"types":["Ground"]},{"name":"Nidoran Male","number":29,"types":["Normal","Poison"]},{"name":"Nidorino","number":30,"types":["Normal","Poison"]},{"name":"Nidoking","number":31,"types":["Ground","Poison"]},{"name":"Nidoran Female","number":32,"types":["Normal","Poison"]},{"name":"Nidorina","number":33,"types":["Normal","Poison"]},{"name":"Nidoqueen","number":34,"types":["Ground","Poison"]}]

If somebody could help me, I would really appreciate it. Thanks in advance.

Answer 1

You need to add the root and totalProperty properties to your reader.

var proxy = new Ext.data.proxy.Ajax({
    url: 'http://localhost:8080/rest-extjs/rest/pokedata/list',
    model: 'Pokemon',
    reader: {
        type: 'json',
        root: 'pokemon',
        totalProperty: 'total'
    }
});

Your JSON needs to be in this format:

{
    total: 151,
    pokemon: [{},{}]
}