無法在ExtJS 4中實現分頁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需要有特定的格式，因爲我一直在尋找的例子，其中大部分的肝動脈化療栓塞額外屬性比如數據或者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: [{},{}] 
}