Question

我收到来自API的JSON响应，其中包含以下对象结构：

{
    "servers": [
        {
            "name": "Root Company Ltd.",
            "guid": "{1760F250-5012-46B2-8BBF-955FFD1C51AD}",
            "parentGuid": null,
            "active": true,
            "connected": true
        },
        {
            "name": "25-Tecvoz HLV1WAD",
            "guid": "{CC893441-A3B5-42B2-95B6-F3E56F0286AE}",
            "parentGuid": "{1760F250-5012-46B2-8BBF-955FFD1C51AD}",
            "active": true,
            "connected": true
        },
        {
            "name": "20-Axis M1031",
            "guid": "{216142B2-A9B8-4AFF-85CD-1D97685F4EE1}",
            "parentGuid": "{1760F250-5012-46B2-8BBF-955FFD1C51AD}",
            "active": true,
            "connected": true
        },
        // ...
    ]
}

正如您所看到的，JSON结构是“平坦的”，对象的子节点不与其父节点嵌套，但在构建树面板时，具有parentGuid集的对象应嵌套到具有匹配的对象guid。

树也不需要是动态的，我的意思是每次打开节点时都不需要向服务器发出新请求，因为这个JSON已经是来自服务器的完整信息集。

我使用的是以下型号：

Ext.define('Web.model.Server', {
    extend : 'Ext.data.Model',
    requires: [
               'Web.globals'
               ],
    idProperty: 'guid',

    // "fields" and "validators" skipped...

    proxy: {
        type: 'rest',
        url: Web.globals.getAddress('/api/servers'),
        appendId: false,

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

商店：

Ext.define('Web.store.Servers', {
    /* URL /api/servers */
    extend: 'Ext.data.TreeStore',
    alias: 'store.servers',
    model: 'Web.model.Server',
    root: {expanded: true}
});

小组：

{
    xtype : 'treepanel',
    name : 'Servers',
    title : 'Select the server',
    flex : 1,
    overflowY : 'scroll',
    autoScroll : true,
    margin : 5,
    store : Ext.create('Web.store.Servers'),
    rootVisible : false,
    displayField: 'name',
    autoLoad: true,                         
}

我怎样才能做到这一点？我无法在文档中找到明确的方法。

如何使用平面JSON填充树？

0 个答案: