java - 使用 ExtJS 4 和 Java REST WS 无法进行分页

Question

我完成了一个应用程序，该应用程序需要从 Java 制作的 REST WS 获取数据。问题是，当我在客户端(javascript)进行分页时，它无法正常工作，我有 151 条记录需要以 12 组为一组显示。但是当我查看网页时，只有前 12 条记录正在显示，但我无法转到下一页或查看丢失的记录。

这里我使用 ExtJS 4 附加我的 Javascript 代码:

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: Ext.create('Ext.data.reader.Json', {type: 'json', root: 'data', totalProperty: 'total'})
    });

    var store = Ext.create('Ext.data.Store', {
        pageSize: 12,
        model: 'Pokemon',
        autoLoad: false,
        proxy: proxy,
        sorters: [{
            property : 'number',
            direction: 'ASC'
        }]
    });

    Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {text: "Number", width: 50, dataIndex: 'number'},
            {text: "Name", width: 130, dataIndex: 'name'},
            {text: "Types", width: 130, dataIndex: 'types'}
        ],
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo:'grid',
        width: 310,
        height: 380,
    });

    store.load({params: {start: 0, limit: 12}});

});

这是我的 REST Web 服务:

package com.vz.samples.rest.service;

import java.util.List;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.QueryParam;
import javax.ws.rs.core.MediaType;

import com.vz.samples.data.response.JsonResponse;
import com.vz.samples.dto.PokemonDTO;
import com.vz.samples.reader.PokeDataReader;

@Path("/pokedata")
public class PokeDataRestService {

    final String filePath = "c:/dev/pokelist.txt";
    private PokeDataReader pdr = PokeDataReader.getInstance(filePath);

    @GET
    @Path("/list")
    @Produces({MediaType.APPLICATION_JSON})
    public JsonResponse listAllPokemon(@QueryParam("start") int start, @QueryParam("limit") int limit) {
        JsonResponse jresp = null;      
        List<PokemonDTO> pokeList = null;       

        pokeList = pdr.readAllPokeData(start, limit);

        jresp = new JsonResponse();
        jresp.setId("pokedex");
        jresp.setData(pokeList);
        jresp.setMessage("Success");
        jresp.setTotal(pokeList.size());

        return jresp;
    }

    @GET
    @Path("/get/{number}")
    @Produces({MediaType.APPLICATION_JSON})
    public JsonResponse getPokemonByNumber(@PathParam("number") int number) {
        JsonResponse jresp = null;
        PokemonDTO targetPokemon = null;

        targetPokemon = pdr.findByNumber(number);

        jresp = new JsonResponse();
        jresp.setId("pokemon");
        jresp.setData(targetPokemon);
        jresp.setMessage("Success");
        jresp.setTotal(1);

        return jresp;
    }



}

最后这是我收到的 JSON:

{"data":[{"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 Female","number":29,"types":["Normal/Poison"]},{"name":"Nidorina","number":30,"types":["Normal/Poison"]},{"name":"Nidoqueen","number":31,"types":["Ground/Poison"]},{"name":"Nidoran Male","number":32,"types":["Normal/Poison"]},{"name":"Nidorino","number":33,"types":["Normal/Poison"]},{"name":"Nidoking","number":34,"types":["Ground/Poison"]},{"name":"Cleafairy","number":35,"types":["Normal"]},{"name":"Cleafable","number":36,"types":["Normal"]},{"name":"Vulpix","number":37,"types":["Fire"]},{"name":"Ninetales","number":38,"types":["Fire"]},{"name":"Jigglypuff","number":39,"types":["Normal"]},{"name":"Wigglytuff","number":40,"types":["Normal"]},{"name":"Zubat","number":41,"types":["Poison/Flying"]},{"name":"Golbat","number":42,"types":["Poison/Flying"]},{"name":"Oddish","number":43,"types":["Grass/Poison"]},{"name":"Gloom","number":44,"types":["Grass/Poison"]},{"name":"Vileplume","number":45,"types":["Grass/Poison"]},{"name":"Paras","number":46,"types":["Grass/Bug"]},{"name":"Parasect","number":47,"types":["Grass/Bug"]},{"name":"Venonat","number":48,"types":["Bug/Psychic"]},{"name":"Venomoth","number":49,"types":["Bug/Psychic"]},{"name":"Digglet","number":50,"types":["Ground"]},{"name":"Dugtrio","number":51,"types":["Ground"]},{"name":"Meowth","number":52,"types":["Normal"]},{"name":"Persian","number":53,"types":["Normal"]},{"name":"Psyduck","number":54,"types":["Water/Psychic"]},{"name":"Golduck","number":55,"types":["Water/Psychic"]},{"name":"Mankey","number":56,"types":["Fightining"]},{"name":"Primeape","number":57,"types":["Fight"]},{"name":"Growlithe","number":58,"types":["Fire"]},{"name":"Arcanine","number":59,"types":["Fire"]},{"name":"Poliwag","number":60,"types":["Water"]},{"name":"Poliwhirl","number":61,"types":["Water"]},{"name":"Poliwrath","number":62,"types":["Water/Fight"]},{"name":"Abra","number":63,"types":["Psychic"]},{"name":"Kadabra","number":64,"types":["Psychic"]},{"name":"Alakazam","number":65,"types":["Psychic"]},{"name":"Machop","number":66,"types":["Fight"]},{"name":"Machoke","number":67,"types":["Fight"]},{"name":"Machamp","number":68,"types":["Fight"]},{"name":"Bellsprout","number":69,"types":["Grass"]},{"name":"Weepinbell","number":70,"types":["Grass/Poison"]},{"name":"Victribel","number":71,"types":["Grass/Poison"]},{"name":"Tentacool","number":72,"types":["Water/Poison"]},{"name":"Tentacruel","number":73,"types":["Water/Poison"]},{"name":"Geodude","number":74,"types":["Rock"]},{"name":"Graveler","number":75,"types":["Rock"]},{"name":"Golem","number":76,"types":["Rock"]},{"name":"Ponyta","number":77,"types":["Fire"]},{"name":"Rapidash","number":78,"types":["Fire"]},{"name":"Slowpoke","number":79,"types":["Water"]},{"name":"Slowbro","number":80,"types":["Water/Psychic"]},{"name":"Magnemite","number":81,"types":["Electric"]},{"name":"Magneton","number":82,"types":["Electric"]},{"name":"Farfetch'd","number":83,"types":["Normal"]},{"name":"Doduo","number":84,"types":["Normal"]},{"name":"Dodrio","number":85,"types":["Normal"]},{"name":"Seel","number":86,"types":["Water/Ice"]},{"name":"Dewgong","number":87,"types":["Water/Ice"]},{"name":"Grimer","number":88,"types":["Poison"]},{"name":"Muk","number":89,"types":["Poison"]},{"name":"Shellder","number":90,"types":["Water/Ice"]},{"name":"Cloyster","number":91,"types":["Water/Ice"]},{"name":"Gastly","number":92,"types":["Ghost"]},{"name":"Haunter","number":93,"types":["Ghost"]},{"name":"Gengar","number":94,"types":["Ghost"]},{"name":"Onix","number":95,"types":["Rock"]},{"name":"Drowzee","number":96,"types":["Psychic"]},{"name":"Hypno","number":97,"types":["Psychic"]},{"name":"Krabby","number":98,"types":["Water"]},{"name":"Kingler","number":99,"types":["Water"]},{"name":"Voltorb","number":100,"types":["Electric"]},{"name":"Electrode","number":101,"types":["Electric"]},{"name":"Exeggcute","number":102,"types":["Grass/Psychic"]},{"name":"Exeggutor","number":103,"types":["Grass/Psychic"]},{"name":"Cubone","number":104,"types":["Ground"]},{"name":"Marowak","number":105,"types":["Ground"]},{"name":"Hitmonlee","number":106,"types":["Fight"]},{"name":"Hitmonchan","number":107,"types":["Fight"]},{"name":"Lickitung","number":108,"types":["Normal"]},{"name":"Koffing","number":109,"types":["Poison"]},{"name":"Weezing","number":110,"types":["Poison"]},{"name":"Rhyhorn","number":111,"types":["Rock"]},{"name":"Rhydon","number":112,"types":["Rock"]},{"name":"Chansey","number":113,"types":["Normal"]},{"name":"Tangela","number":114,"types":["Grass"]},{"name":"Kanghskhan","number":115,"types":["Normal"]},{"name":"Horsea","number":116,"types":["Water"]},{"name":"Seadra","number":117,"types":["Water"]},{"name":"Goldeen","number":118,"types":["Water"]},{"name":"Seaking","number":119,"types":["Waters"]},{"name":"Staryu","number":120,"types":["Water"]},{"name":"Starmie","number":121,"types":["Water/Psychic"]},{"name":"Mr.Mime","number":122,"types":["Psychic"]},{"name":"Scyther","number":123,"types":["Bug"]},{"name":"Jinx","number":124,"types":["Ice"]},{"name":"Electabuzz","number":125,"types":["Electric"]},{"name":"Magmar","number":126,"types":["Fire"]},{"name":"Pinsir","number":127,"types":["Bug"]},{"name":"Tauros","number":128,"types":["Normal"]},{"name":"Magikarp","number":129,"types":["Water"]},{"name":"Gyarados","number":130,"types":["Water/Flying"]},{"name":"Lapras","number":131,"types":["Water/Ice"]},{"name":"Ditto","number":132,"types":["Normal"]},{"name":"Eevee","number":133,"types":["Normal"]},{"name":"Vaporeon","number":134,"types":["Water/Ice"]},{"name":"Jolteon","number":135,"types":["Electric"]},{"name":"Flareon","number":136,"types":["Fire"]},{"name":"Porygon","number":137,"types":["Normal"]},{"name":"Omanyte","number":138,"types":["Water/Rock"]},{"name":"Omastar","number":139,"types":["Water/Rock"]},{"name":"Kabuto","number":140,"types":["Rock"]},{"name":"Kabutops","number":141,"types":["Rock"]},{"name":"Aerodactyl","number":142,"types":["Rock/Flying"]},{"name":"Snorlax","number":143,"types":["Normal"]},{"name":"Articuno","number":144,"types":["Ice/Flying"]},{"name":"Zapdos","number":145,"types":["Electric/Flying"]},{"name":"Moltres","number":146,"types":["Fire/Flying"]},{"name":"Dratini","number":147,"types":["Dragon"]},{"name":"Dragonair","number":148,"types":["Dragon"]},{"name":"Dragonite","number":149,"types":["Dragon/Flying"]},{"name":"Mewtwo","number":150,"types":["Psychic"]},{"name":"Mew","number":151,"types":["Psychic"]}],"id":"pokedex","message":"Success","total":151}

我是否需要包含额外的参数或者 JS 组件才能使其工作？

提前致谢，问候。

Answer 1

问题几乎肯定出在您的服务器端代码中。 Ext JS 绝对不会限制远程配置的存储中显示或不显示哪些记录。 Ext JS 所做的一切都是提交带有特定参数的 AJAX 请求，并等待响应。当它收到响应时，它会尝试处理它，如果成功，则会将模型实例中的数据呈现到网格中。从这个意义上说，Ext JS 与分页数据的关系实际上是握手的关系——请求并期望接收某种格式的数据。

其中重要的部分是，Ext JS 完全依赖于服务器正确返回的数据来处理分页。如果网格中的记录不正确，则需要首先检查从服务器返回的数据。很有可能，您在网格中看到的内容正是您的服务器发回给 Ext JS 显示的内容。

我的猜测是问题出在您的 readAllPokeData() 方法中。我将从这里开始并确保它实际上在服务器端对数据进行分页。如果无法正常工作，Ext JS 将无法执行任何操作，只能呈现服务器提供的数据。