ExtJS data store for tree

I've开发者_StackOverflow中文版 got a basic ExtJS question, which I can't seem to resolve based on reading the docs and searching. Currently I have a TreePanel that loads JSON directly from a URL. I'm trying to separate the data from the view, so that I can also use that data to feed into an OpenLayers map (using GeoExt). How can I point a TreePanel to an Ext.data.Store rather than to a URL?

TreePanels use TreeLoaders, not Stores, to load data. The reason is that trees require hierarchical data, while Stores are flat table structures and do not support hierarchies. The basic data objects are also different (Record vs. Node). Of course you could store your own hierarchical data in a Store using parent/child keys, but there is not anything like this built in for Ext components at this time. If you are trying to cache tree data, you might have to roll your own solution for that.

EDIT: Now that Ext 4 is out, this answer only applies to Ext 3. Ext 4 has a (mostly) unified data model now and trees use a TreeStore (with an additional NodeInterface applied to the models) and no longer have a separate TreeLoader class.

In your TreePanel config, just point to your data url.

  loader: new Ext.tree.TreeLoader({
    url: '/path/to/data.json',
    requestMethod: 'GET',
    preloadChildren: true
  })

If you need a Store for this data, it could get tricky as noted by bmoeskau, since the data format could differ.

in our app we're using a combination of a tree panel and a dataview, both are making requests for data (tree using traditional tree loader) and data view using store. both are submitting to the same url, and yes, there are two calls, but results are returned properly formatted by a view parameter ( tree or dataview ) and the results are the same, just decorated differently.

it would be ideal to have one call, central data, but this seems to work acceptably.

write a few functions to abstract the parsing of (record to node) and you end up with a general way of accessing data for either.