javascript - 无法在 ExtJS 4 Grid 中实现分页

Question

我在尝试使用 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 是否需要具有特定的格式，因为我一直在寻找示例，其中大多数都有附加属性，例如数据或总计数。我从 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"]}]

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

Answer 1

您需要将 root 和 totalProperty 属性添加到您的阅读器。

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