ExtJS的 - 加载JSON数据到TreePanel中

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，并将其添加到treestore。与常规Ext.data.Store我可以简单地使用store.loadData（）方法，但这样的方法并不存在一个treestore。

我试图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