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"]}]
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: [{},{}]
}