配置 TreePanel 和 TreeStore答案

【问题标题】：Configuring TreePanel and TreeStore配置 TreePanel 和 TreeStore
【发布时间】：2014-06-13 22:05:27
【问题描述】：

我无法配置 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'
        }
    }
});

【问题讨论】：

"它的子节点应该是这个JSON列表，以节点的名字作为name属性"意思是每个节点都有不同的名字？？
是的，这应该是一个列表，其中包含存储在后端 REST API 的数据库中的服务器。它应该与this example 非常相似，但树只有一层。
我能找到的一个解决方案是，首先从远程url获取json，然后修改它并绑定商店。你只需要名称字段吗？
是的，只是名称。单击它后，将打开一个窗口进行编辑。我会尝试修改它，看看我能得到什么。

标签： extjs extjs4 treepanel

【解决方案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元素并修改它并绑定数据

【讨论】：