Javascript 无法在ExtJS 4网格中实现分页

我在尝试使用ExtJS4实现网格分页时遇到了一个问题。我目前为我的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();

});

我想知道JSON是否需要一种特定的格式，因为我一直在寻找示例，其中大多数都有额外的属性，比如数据或totalCount。我从Java REST WS返回的JSON如下所示：

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

---

如果有人能帮助我，我会非常感激。提前感谢。

您需要将

根属性

和

总属性

添加到您的阅读器中

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

您的JSON需要采用以下格式：

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

---

是的，JSON需要一种特定的格式来执行。使用

totalCount

，您的思路是正确的。读者需要了解两个属性：

totalProperty

&

root

非常感谢，我将更改我的实现，然后修复此问题。非常感谢，我是ExtJS新手，在实现时遇到了一些问题。再次非常感谢。