Extjs 配置TreePanel和TreeStore

我在配置TreePanel以显示RESTAPI的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

属性。其他属性可以忽略，并且这些子级在任何情况下都没有子级

我只能在树面板中显示一个没有名字的根节点，它的子节点也没有名字，这个数字与JSON中的对象数量匹配。它们都有子对象，并且子对象的数量与JSON中的对象数量相匹配，没有名称，子对象也以相同的方式无限大

我找不到应该设置哪些属性以使树面板按预期工作。我无法更改JSON，因为RESTAPI是这样定义的

以下是树面板代码：

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

---

您的响应将从服务器返回

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

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

        }
    ];

定义新函数extended 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', {})
        }
    });

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

---

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

“它的子节点应该是这个json列表，节点的名称作为name属性”，这意味着每个节点都有不同的名称？？是的，这应该是一个包含存储在后端REST API数据库中的服务器的列表。它应该非常类似于，但树只有一个级别。我可以找到的一个解决方案是，首先从远程url获取json，然后修改它并绑定存储。你只需要名称字段吗？是的，只需要名称。在我点击它之后，一个窗口会打开来编辑它。我会尝试修改它，看看我能从哪里得到。