CODEWITHSUNDEEP
javascriptjsonextjstree
stackato
stackato

Reputation: 1145

ExtJS -- load JSON data into treepanel

I have tree panel that will show the full list of all the nodes, as opposed to the lazy load format. I first make an ajax request to get some plain data, format it into the full list format, then I want to append that to the tree.

My conversion fn returns JSON like this:

{
    "text": ".",
    "children": [
        {
            "task": "Project: Shopping",
            "duration": 13.25,
            "user": "Tommy Maintz",
            "iconCls": "task-folder",
            "expanded": true,
            "children": [
                {
                    "task": "Housewares",
                    "duration": 1.25,
                    "user": "Tommy Maintz",
                    "iconCls": "task-folder",
                    "children": [
                        {
                            "task": "Kitchen supplies",
                            "duration": 0.25,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        },
                        {
                            "task": "Groceries",
                            "duration": 0.4,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task",
                            "done": true
                        },
                        {
                            "task": "Cleaning supplies",
                            "duration": 0.4,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        },
                        {
                            "task": "Office supplies",
                            "duration": 0.2,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        }
                    ]
                },
                {
                    "task": "Remodeling",
                    "duration": 12,
                    "user": "Tommy Maintz",
                    "iconCls": "task-folder",
                    "expanded": true,
                    "children": [
                        {
                            "task": "Retile kitchen",
                            "duration": 6.5,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        },
                        {
                            "task": "Paint bedroom",
                            "duration": 2.75,
                            "user": "Tommy Maintz",
                            "iconCls": "task-folder",
                            "children": [
                                {
                                    "task": "Ceiling",
                                    "duration": 1.25,
                                    "user": "Tommy Maintz",
                                    "iconCls": "task",
                                    "leaf": true
                                },
                                {
                                    "task": "Walls",
                                    "duration": 1.5,
                                    "user": "Tommy Maintz",
                                    "iconCls": "task",
                                    "leaf": true
                                }
                            ]
                        },
                        {
                            "task": "Decorate living room",
                            "duration": 2.75,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task",
                            "done": true
                        },
                        {
                            "task": "Fix lights",
                            "duration": 2.75,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task",
                            "done": true
                        },
                        {
                            "task": "Reattach screen door",
                            "duration": 2,
                            "user": "Tommy Maintz",
                            "leaf": true,
                            "iconCls": "task"
                        }
                    ]
                }
            ]
        },
        {
            "task": "Project: Testing",
            "duration": 2,
            "user": "Core Team",
            "iconCls": "task-folder",
            "children": [
                {
                    "task": "Mac OSX",
                    "duration": 0.75,
                    "user": "Tommy Maintz",
                    "iconCls": "task-folder",
                    "children": [
                        {
                            "task": "FireFox",
                            "duration": 0.25,
                            "user": "Tommy Maintz",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Safari",
                            "duration": 0.25,
                            "user": "Tommy Maintz",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Chrome",
                            "duration": 0.25,
                            "user": "Tommy Maintz",
                            "iconCls": "task",
                            "leaf": true
                        }
                    ]
                },
                {
                    "task": "Windows",
                    "duration": 3.75,
                    "user": "Darrell Meyer",
                    "iconCls": "task-folder",
                    "children": [
                        {
                            "task": "FireFox",
                            "duration": 0.25,
                            "user": "Darrell Meyer",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Safari",
                            "duration": 0.25,
                            "user": "Darrell Meyer",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Chrome",
                            "duration": 0.25,
                            "user": "Darrell Meyer",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Internet Explorer",
                            "duration": 3,
                            "user": "Darrell Meyer",
                            "iconCls": "task",
                            "leaf": true
                        }
                    ]
                },
                {
                    "task": "Linux",
                    "duration": 0.5,
                    "user": "Aaron Conran",
                    "iconCls": "task-folder",
                    "children": [
                        {
                            "task": "FireFox",
                            "duration": 0.25,
                            "user": "Aaron Conran",
                            "iconCls": "task",
                            "leaf": true
                        },
                        {
                            "task": "Chrome",
                            "duration": 0.25,
                            "user": "Aaron Conran",
                            "iconCls": "task",
                            "leaf": true
                        }
                    ]
                }
            ]
        }
    ]
}

Now all I am trying to do is take this JSON and add it to the treestore. With a regular Ext.data.Store I can simply use the store.loadData() method, but no such method exists for a treestore.

I tried treeStore.setRootNode() into which I pass in the above JSON and it appends the root node but not any of its children.

thanks.

Upvotes: 1

Views: 1092

Answers (1)

Tarabass
Tarabass

Reputation: 3150

The methods are just there.

load( [options] )

Loads the passed node (defaulting to the root node) using the configured proxy.

Be aware that it is not usually valid for a developer to call this method on a TreeStore.

TreeStore loads are triggered by a load request from an existing tree node, when the node is expanding, and it has no locally defined children in its data.
Parameters

    options : Object (optional)

    config object. This is passed into the Operation object that is created and then sent to the proxy's Ext.data.proxy.Proxy.read function. The options can also contain a node, which indicates which node is to be loaded. If not specified, it will default to the root node.
        node : Ext.data.NodeInterface (optional)

        The tree node to load. Defaults to the store's root node

Fires

    beforeload

Overrides: Ext.data.Store.load

http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.TreeStore-method-load

Upvotes: 1

Related Questions