View Full Version : Complicated tree + config panel - how to implement?

18 Oct 2013, 6:54 AM
Hi guys,

I'm trying to create a lazy loading tree, but struggling to get it working the way I want. I want to be able to customise what's sent to the server when a node is expanded. Looking at the "tree reorder" example (and ignoring the reordering - I don't need to do that), if you expand the ExtJS -> data -> association node, this gets sent to the server:

_dc: 1382104944331
path: extjs
sort: [{"property":"leaf","direction":"ASC"}, "property":"text","direction":"ASC"}]
node: src/data/association

The server then sends back each new node to add as JSON, but strangely also with an id, which then ends up in the tree. I guess in this case it's useful because the tree represents a file/path structure, but not very useful in my case.

"text": "HasMany.js",
"id": "src\/data\/association\/HasMany.js",
"leaf": true,
"cls": "file",
"qtip": "Type: JavaScript File<br \/>Last Modified: Sep 23, 2013, 1:12 pm<br \/>Size: 11 KB"
}, {
"text": "BelongsTo.js",
"id": "src\/data\/association\/BelongsTo.js",
"leaf": true,
"cls": "file",
"qtip": "Type: JavaScript File<br \/>Last Modified: Sep 23, 2013, 1:12 pm<br \/>Size: 13 KB"

I tried embedding JSON into the ID, but this didn't work. for each node expand query, I need at a minimum:

{conType: 'aType', uuid: 'aLongNumber', conEntity: 'anEntity',
queryItems: [
{text: 'firstItem', type: 'aType'},
{text: 'secondItem', type: 'anotherType'}

Where queryItems is the list of all nodes between and including the root and the node to be expanded, and the rest of the info is just details about which tree in the server to load.

The config window for the tree holds all the above info (except 'text' from query items), so for each node expand request, I want to get that info from the config window/controller. How do I do this? Also, Should I have a controller for the tree and a separate controller for the window that configures it, or one controller that configures both?

For the queryItems part, I would need to traverse the tree manually from leaf to root to get the name and type of each node and construct the queryItems. How do I do this also? I have made some attempts at using the "beforeLoad" method to see if I could alter the Operation before it fires, but haven't had any success. In "Ext.data.NodeInterface" there is a 'depth' value I could get, which then can be used to get everything needed from the tree config window. That window knows what 'conType', 'uuid', 'conEntity' and 'type' each node (between root and leaf) has based on the node's depth. I still need the name of each node though, the text value which the config panel does not know.

I could also embed all the above info in each node, but that seems wasteful - I may have hundreds/thousands of nodes but only one config panel and am cautious of memory usage.

In my TreeStore, I am using a proxy defined like below (with hardcoded uuid/entityNames for testing)

proxy: {
type: 'ajax',
url: '../TreeTest',
extraParams: {
action: 'initialiseTree',
uuid: 'ad2d2b41-f4fa-4f84-99e2-08e399e07fbb',
entityName: 'Wells'
queryItem: 'UWI'

If you have any suggestions for how to build this most efficiently I would be very grateful! I am at a brick wall with this one.

I'm pretty new to ExtJS - this is the first time I've tried building with a tree.

Thanks :)

21 Oct 2013, 6:33 AM
Anyone? :)