Loading nested JSON into a TreeStore

[funkadamus]

I have a JSON file that I need to parse in to a TreeStore which will get passed to a TreePanel, however it's failing with any subdirectories.

Example of my JSON input :

[{
 "text" : "review",
 "id" : "src\/review",
 "files" : [ "file.pdf", "file2.pdf" ],
 "folders" : [{
    "text" : "test",
    "id" : "src\/review\/test",
    "files" : ["file3.pdf"],
    "folders" : [],
    "leaf" : "true"
  }]
}]

My model and store is defined as :

Ext.define('TopDir', {
 model : 'Ext.data.Model',
 fields : ['text', 'id', 'files', 'folders'],
 hasMany : 'SubDir'
});

 Ext.define('SubDir', {
  model : 'Ext.data.Model',
  fields : ['text', 'id', 'files'],
  belongsTo : 'TopDir'
 });

var store = Ext.create('Ext.data.TreeStore', {
  model : 'TopDir',
  proxy : {
    type : 'ajax',
    url : '/documents/grabjson',
  },
  root : { 
    id : 'src',
    text : "Documents", 
    expanded : true,
  },
  listeners : {
    load : function() {
      console.log(arguments);
    }
  }
});

And finally, my TreePanel

  var tree = Ext.create('Ext.tree.Panel', {
        renderTo: 'tree-div',
        height: 650,
        width: 700,
	store : store,
        title: 'Document Browser',
        useArrows: true
 });

I basically tried to copy the "Drag and Drop Reordering" example while changing it around to work with my JSON output. With the above code, it will display the top-level directories yet gives an error when I try to expand anyone of them : "Uncaught TypeError: Cannot read property 'internalId' of undefined".

I also got a bug with a previous revision that would again display the top-level directories, but whenever I would expand a node, it would be the same top-level entries within and would be a recursive loop of those regardless of how far I went down the tree.

I'm fairly new to the ExtJS world so I'm not really sure where to go from here in debugging this. In my console output, it seems that the JSON is getting at least loaded, so my best guess is I'm doing something wrong with my models, although I'm not sure where to take it.

[h0raz]

I have the same problem... Have you found a solution?

[marc.spoor]

I had the same problem, and it turned out that I had cycles in my "tree" data.

In my case, the child of a node had the same id as the parent, which lead to a whole lot of confusion.

If that's not the case for you, maybe you should post a stack trace.

[leomdg]

I'm in the same situation, please respond.

[Asken]

You're not using the default notation 'children' in your json data.

Try to do this:

...
proxy : {
    type : 'ajax',
    url : '/documents/grabjson',
    // set the reader to look for folders rather than children
    reader: {
        type: 'json',
        root: 'folders'
    }
  }
...

[yufulou]

You're not using the default notation 'children' in your json data.

Try to do this:

...
proxy : {
    type : 'ajax',
    url : '/documents/grabjson',
    // set the reader to look for folders rather than children
    reader: {
        type: 'json',
        root: 'folders'
    }
  }
...

How about if i have a json object like this


{status:0,tree_data:[{ "text" : "review", "id" : "src\/review", "files" : [ "file.pdf", "file2.pdf" ], "folders" : [{ "text" : "test", "id" : "src\/review\/test", "files" : ["file3.pdf"], "folders" : [], "leaf" : "true" }] }]}

This situation happened when i have some extra information received from server with one request. What should i do for displaying the "tree_data"?