Ext JS + Spring MVC中的递归数据结构

Question

我正在Spring MVC和Ext JS 4.1中设计一个简单的用户通讯录。我在Java中定义了我的User类以允许引用其他用户：

@JsonIdentityInfo(generator=ObjectIdGenerators.IntSequenceGenerator.class, property="@id")
public class User {

    @JsonProperty
    private String name;

    @JsonProperty
    private String email;

    @JsonProperty
    private List<User> friends = new ArrayList<User>();
}

我已经使用@JsonIdentityInfo来确保Jackson正确处理循环引用，以便转换为JSON并在Ext JS和Spring之间传递。我像这样发送我的JSON：

{"data":[
    {"@id":1,"name":"John","email":"john@email.com",
        "friends":[
            {"@id":2,"name":"Peter","email":"peter@email.com","friends":[1]}
        ]},
    2],
"total":2,
"success":true}

约翰有@id 1，彼得有@id 2.彼得被定义为约翰的朋友，反之亦然。在"total"之前的那个2是对彼得的引用，因为他已经被定义了。我的问题是：现在我已经有了Jackson工作的递归数据结构，你如何将它们与Ext JS集成？我在models/User.js

中有这个

Ext.define('AM.model.User', {
    extend : 'Ext.data.Model',
    fields : [ '@id', 'name', 'email' ],
    idProperty : '@id',
    hasMany : [ {
        model : 'AM.model.User',
        name : 'friends',
        associationKey:'friends'
    } ]
});

我可以读约翰很好，我可以在john.friends中阅读彼得，但我不能从data阅读彼得，因为所有的外部JS都是2（彼得的@id ）。我正在ExtJS.grid.Panel中展示它们，只有约翰出现了。彼得的排只是空白。

我是否需要在ExtJS.data.Store？

中覆盖读者和作者

Answer 1

JSOG图书馆：https://github.com/jsog/jsog JSOG JACKSON模块：https://github.com/jsog/jsog-jackson

你可以用JSOG库+ jackson JSOG模块做到这一点。 创建一个自定义阅读器，如：

Ext.define('Ext.data.reader.Jsog', {
extend: 'Ext.data.reader.Json',
alternateClassName: 'Ext.data.JsogReader',
alias : 'reader.jsog',

getResponseData: function(response) {
    var data, error;
    try {
        data = JSOG.decode(Ext.decode(response.responseText));
        return this.readRecords(data);
    } catch (ex) {
        error = new Ext.data.ResultSet({
            total  : 0,
            count  : 0,
            records: [],
            success: false,
            message: ex.message
        });

        this.fireEvent('exception', this, response, error);

        Ext.Logger.warn('Unable to parse the JSON returned by the server');

        return error;
    }
}});

和商店定义如

  var store = Ext.create('Ext.data.Store', {
        proxy: {
                        type: 'ajax',
                        reader: 'jsog',
                        url: 'dummydata/data-grid.js'
        },fields: [
            { name: 'company' },
            { name: 'price', type: 'float' },
            { name: 'change', type: 'float' },
            { name: 'pctChange', type: 'float' },
            { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
        ]
    });

并且读者夸大你的参考。我们实施了这个解决方案。

dummydata

[
{ "@id": "1",  "company" : "a" , "price" : 2},
{ "@id": "2",  'company' : "b" },
{ "@id": "3",  "company" : "c" },
{ "@id": "4",  "company" : "d" },
{ '@ref': "1" },
{ "@ref": "3" },
{ "@ref": "2" },
{ "@ref": "4" }]