javascript - ExtJS -- 将 JSON 数据加载到树面板中

Question

我有树面板，它将显示所有节点的完整列表，而不是延迟加载格式。我首先发出一个 ajax 请求来获取一些纯数据，将其格式化为完整列表格式，然后我想将其附加到树中。

我的转换 fn 返回 JSON，如下所示:

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

现在我要做的就是获取此 JSON 并将其添加到树存储中。对于常规 Ext.data.Store，我可以简单地使用 store.loadData() 方法，但树存储不存在这样的方法。

我尝试了treeStore.setRootNode()，我将上面的JSON传递给它，它附加了根节点，但不附加它的任何子节点。

谢谢。

Answer 1

方法就在那里。

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