Configuring TreePanel and TreeStore

Question

I am having trouble to configure a TreePanel to show this JSON results from a REST API.

The JSON format is like this:

[
    {
        "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
    }
]

The name of the root node must be Servers, and it's children node should be this JSON list, with the name of the node as the name property. The other properties can be ignored, and these children will have no children in any situation.

I can only show in the TreePanel a root node without name, and it's children also without name, the number matching the number of objects in the JSON. they all have children also matching the number of objects in the JSON, without names, which also have children in the same way, to infinity.

The TreePanel so far

I can't find which properties I should set to make the TreePanel work as I expect. I can't change the JSON as it is defined like this by the REST API.

Here's the TreePanel code:

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

    margin: 5,

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

Here's the code for the 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'
        },
});

And finally the Model:

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

"it's children node should be this JSON list, with the name of the node as the name property" that means every node has a different name?? — sakir
Yes, this is supposed to be a list containing the servers stored in the DB of the backend REST API. It should be really similar to this example but the tree will have only one level. — Bruno Finger
one solution I can find is ,first get the json from remote url,after that modify it and bind the store .do u only need name field? — sakir
Yes, just the name. After I will click on it, a window will open to edit it. I will try to modify it and see where I can get. — Bruno Finger

sakir sakir · Accepted Answer · 2014-06-13T14:05:27

your response turn back from server

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

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

        }
    ];

define new function 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'
});

your model

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

in that way you can add root element(in your case servers) to response and pass these values treeview.

or you can create a new json element and modify it and bind the data

Configuring TreePanel and TreeStore

1 Answers