Loading tree data from local "nested store"

[mmix]

I have a problem which prevents me from implementing a true JSON ajax support so I cannot use TreeLoader to lazy-load data. Namely I am using salesforce apex and they still do not have support for ajax requests returning just pure JSON (the workaround of having a separate vf page for every kind of request is a pain). My solution with grids and flat JSONStore was using Google's JSON object and then loading data "offline" inside javascript using store.loadData(). This however does not work with trees as they insist on using TreeLoaders.

So my question is, if I do not need lazy-loading and I have a client-side JSON object with nested children formated exactly like the samples how can I load them into TreePanel or TreeGrid without relying on ajax? How can I build a tree node structure client-side and force tree to use it instead of calling server? I dont see any support for this approach.

[Condor]

A TreeLoader can load all nodes, including children, as long as your data is returned with the correct syntax, e.g.

[{
  text: 'Node 1',
  children: [{
    text: 'Node 1a',
    children: [{
      text:' Node 1aA',
      leaf: true
    },{
      text:' Node 1aB',
      leaf: true
    }]
  },{
    text: 'Node 1b',
    leaf: true
  }]
},{
  text: 'Node 2',
  leaf: true
}]

[mmix]

Ok, but how?

Lets say I have your JSON in an actual JSON object:

var myData = [{
  text: 'Node 1',
  children: [{
    text: 'Node 1a',
    children: [{
      text:' Node 1aA',
      leaf: true
    },{
      text:' Node 1aB',
      leaf: true
    }]
  },{
    text: 'Node 1b',
    leaf: true
  }]
},{
  text: 'Node 2',
  leaf: true
}];

// magic code here

How do I show this inside treepanel/treegrid? As I said, this data is already on a page, no additional http requests, must use myData object.

[Condor]

Simply create your tree with:

root: {
  children: [...]
}

[mmix]

No joy,

I get "attributes' is null or not an object" (IE) or "Uncaught TypeError: Cannot set property 'uiProvider' of undefined" (Chrome) inside SetRootNode. Both indicating that SetRootNode expects node to have attributes. It seem as if root can only be TreeNode (or AsyncTreeNode or another descendant) or can be a configuration object instructing treenode on which type of node to create. I still do not see a way to use root to accomplish my task (though the documentation for treepanel is rather scarce on that matter and treegrid docs are not available yet).

[Condor]

What exactly did you specify as the root?

[mmix]

root: myData

and

root: { children: myData }

though one of them showed data on IE (but it had an additional empty root node)


Slight offtopic: just to confirm, there is no way to have checkoxes in treegrid as you can in treepanel? The checked: true/false seems to have no effect on the treegrid.

[Condor]

And 'myData' contains...?

It seems that Ext.ux.tree.TreeGridNodeUI.renderElements forgets to render the checkbox. No idea why, but that would be easy to add.

[mmix]

myData is JSON object (as in the above message)


Another small question: is there a way to tell treegrid to expand columns to use the space? (as in viewConfig: {forceFit: true, autoFill: true } for regular grids)

[Condor]

Ext.ux.tree.TreeGrid.setRootNode assumes that the node is an Ext.tree.Node instance; again, no idea why!

Use:

root: new Ext.tree.TreeNode({children: myData})

Sorry, TreeGrid has not forceFit/autoFill support. You will have to update the column widths manually.