無法在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是否需要具有特定的格式，因為我一直在尋找示例，並且其中大多數具有其他屬性，例如data或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"]}]

如果有人可以幫助我，我將非常感激。 提前致謝。

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