Question

我无法配置TreePanel以显示来自REST API的JSON结果。

JSON格式如下：

[
    {
        "guid": "{00000000-0000-0000-0000-000000000001}",
        "name": "hhhh",
        "vendor": "1",
        "model": "1",
        "address": "hhhh",
        "port": 8080,
        "redirect": false,
        "optimizeBandwidth": true,
        "reverseConnection": false,
        "timeOutEnabled": false,
        "timeOutInterval": 60,
        "enabledCameras": 1,
        "contactIdCode": "0001j",
        "contactIdPartition": "00j",
        "user": "jgjh",
        "password": "ghghgh",
        "enabled": true,
        "connected": false
    }
]

根节点的名称必须是Servers，并且它的子节点应该是此JSON列表，节点的名称为name属性。其他属性可以忽略，这些孩子在任何情况下都不会有孩子。

我只能在TreePanel中显示没有名称的根节点，并且它的子节点也没有名称，该数字与JSON中的对象数量相匹配。他们都有孩子也匹配JSON中的对象数量，没有名字，也有同样的孩子，无限。

The TreePanel so far

我无法找到我应该设置哪些属性来使TreePanel按预期工作。我无法更改JSON，因为它是由REST API定义的。

这是TreePanel代码：

....
{
    xtype: 'treepanel',
    title: 'Selecione o servidor',
    flex: 1,

    margin: 5,

    store: Ext.create('Project.store.TreeServidor'),
},
....

这是TreeStore的代码：

Ext.define('Project.store.TreeServidor', {
    extend: 'Ext.data.TreeStore',
    model: 'Project.model.Servidor',
    requires: 'project.model.Servidor',


    root: {
            expanded: true,
            text: 'Servidores',
            draggable: false,
            id: 'guid',
            root: 'name'
        },
});

最后是模特：

Ext.define('Project.model.Servidor', {
    extend: 'Ext.data.Model',

    fields: [
        ... too much big
    ],

    proxy: {
        type: 'rest',
        url: 'http://localhost:8000/servers/',
        noCache: false,

        writer: {
            type: 'json',
            writeAllFields: true,
            root: 'servers',
            encode: true,
            allowSingle: true
        },

        reader: {
            type: 'json',
            root: 'servers'
        }
    }
});

Answer 1

您的回复从服务器返回

var response=[
        {
            "guid": "{00000000-0000-0000-0000-000000000001}",
            "name": "hhhh",
            "vendor": "1"

        },
          {
            "guid": "{00000000-0000-0000-0000-000000000002}",
            "name": "hhhh",
            "vendor": "2"

        }
    ];

定义新函数扩展Ext.data.reader.Json

Ext.define('Ext.data.reader.JsonWithoutRoot', {
    extend: 'Ext.data.reader.Json',
    read: function(response) {
        return this.callParent([ { root: response } ]);
    },
    root: 'servers'
});

你的模特

 Ext.define('Project.model.Servidor', {
        extend: 'Ext.data.Model',

        fields: [
            ... too much big
        ],

        proxy: {
            type: 'rest',
            url: 'http://localhost:8000/servers/',
            noCache: false,

            writer: {
                type: 'json',
                writeAllFields: true,
                root: 'servers',
                encode: true,
                allowSingle: true
            },

            reader: Ext.create('Ext.data.reader.JsonWithoutRoot', {})
        }
    });

通过这种方式，您可以将根元素（在您的案例服务器中）添加到响应中并传递这些值树视图。

或者你可以创建一个新的json元素并修改它并绑定数据

配置TreePanel和TreeStore

1 个答案: