2

我正在 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。彼得被定义为约翰的朋友，反之亦然。the 之前的 2"total"是对 Peter 的引用，因为他已经被定义。我的问题是：现在我已经从 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，并且可以在 john.friends 中阅读 Peter，但我无法阅读 Peter from，data因为所有 Ext JS 都是2(Peter's @id)。我在ExtJS.grid.Panel中显示它们，只有 John 出现了。彼得的行是空白的。

在此处输入图像描述

我需要覆盖我的ExtJS.data.Store中的 Reader 和 Writer吗？

4

1 回答 1

2

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' }
        ]
    });

和读者膨胀你参考。我们实施的这个解决方案。

虚拟数据

[
{ "@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" }]
于 2013-09-01T16:25:32.543 回答