View Full Version : Forcing tree to reload & redisplay from local data

19 Sep 2013, 5:11 PM
I'm building a tool that fetches data from the server, displays it in a TreePanel, allows the user to manipulate the data, and then save the modified data back to the server, rather than round-trip every change via a separate transaction (which, in my application domain, would incur some penalties).

The data is in the form of a JS array of objects; one property of each object is an array of zero or more sub-objects. That's it, just the two levels; the top-level objects and their child objects represent different kinds of entities. The top-level nodes are never re-ordered or deleted; the second-level nodes can be deleted, created, or edited.

My app reads the data, builds a 'root' object and creates a TreeStore from it, creates a TreePanel from the store, then provides a UI for the user to manipulate the data. The UI is working directly with the original form of the data (because it has to be sent back to the server in that form). After each of those operations (add, delete, or edit a 2nd-level "thing"), I want the tree to update to reflect the changed state of the data structure it represents. However, I'm not finding a straightforward way to do this that works. The tree does not redraw itself after (for example) a Node.destroy() and tree.getView().refresh() doesn't make that happen, either. I've tried repopulating the TreeStore from scratch with setRootNode(), but this breaks the tree completely; I end up with phantom duplicate nodes that throw errors when you try to do anything with them (including calling collapseAll() or expandAll() on the tree).

The almost-relevant threads I've found here and on StackOverflow are all about updating the TreeStore from the server via a Proxy, which is not available to me. Can anyone point me to guidance to how to do what I want? Or is my only alternative to re-create the TreePanel from scratch after each operation?

19 Sep 2013, 11:45 PM
I tried something like this couple of years back. I was also having problems with treeStore. what i did was that i dont use any store with the treepanel. i parse the received data from backend into a JS array and then when the user makes changes, i make the changes in the JS array and the tree (like deleting nodes etc.). When user clicks save, i send the data from JS array to backend and the new data returned is reloaded into the tree using setRootNode with children config.

21 Sep 2013, 3:38 AM
Why don't you store data in tree only without those arrays of arrays of etc? If you properly tweak tree's model you can easily get the data you need in the format you need.

23 Sep 2013, 8:35 AM
The combination of populating and re-populating the tree with setRootNode() instead of using an explicit TreeStore finally worked.