配置TreePanel和TreeStore

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中的对象数量匹配的子项，没有名称，它们也以相同的方式拥有无限多的子项。

​

​

我找不到应该设置哪些属性才能使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', {})
        }
    });

通过这种方式，您可以将根元素(在本例中为服务器)添加到response并传递这些值treeview。

或者，您可以创建一个新的json元素并对其进行修改并绑定数据