PDA

View Full Version : Really confused about TreePanel and how to 'map' data



forumuser1080
18 Feb 2011, 6:27 PM
Is there any way to tell the TreePanel what format the json data is coming back in? I.E. I am querying from a server in which I do not have control over so I would like to somehow 'map' the properties that are coming back from the server to property names that the TreePanel will understand. Actually it is probably the TreeLoader that needs the 'mapping'

i.e tree loader doc says it expects data like this:


[{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]


But what if the server I am requesting data from is returning the entire tree in json but not with those object names:

simple example with some of the property names changed here is the mapping I would like to apply for this example:
name -> text (i.e I am getting back name, but TreePanel wants text property)
moredata -> children (again in this bad example I am getting moredata for the children array property, need to map it to children)


[{
id: 1,
name: 'A leaf Node'
},{
id: 2,
name: 'A folder Node',
moredata: [{
id: 3,
name: 'A child Node'
}]
}]


This is all very new to me and reading the examples and the documentation I am not really sure if there is a way to do this mapping, but I would like to know for sure before I do it the hard way.

I looked into extending TreeLoader to look for a different format but I am not sure that is really possible. Please help.

Thanks!

forumuser1080
24 Feb 2011, 6:01 PM
Still trying to figure out if I can extend TreeLoader and override some functionality to parse json data that is not coming back exactly like TreeLoader is expected. If anyone has been able to do this please help as I have not yet found a way.

Thanks

drian
24 Feb 2011, 11:52 PM
I think the only way is to get the response from the server with "text" and "children". These are actually "configs" so you need to respect the names.

From your server you can send more data bound to 1 node, and you can easily access them as yourNode.attributes['extraDataNameHere']. So, proccess your data on the server, send "text" and "children", and if you really need to have an attribute named "name" and "moredata', you can add them as well.(but i doubt you really need them)

Condor
25 Feb 2011, 12:02 AM
Override the createNode method of the TreeLoader (or for more complex data override processResponse - but you don't need that).

forumuser1080
25 Feb 2011, 8:59 AM
Thanks for the responses guys. I am more confused now than ever.

drian,
I am not sure exactly how to configure my server to send more data bound to one node. I am also not really sure what that means. I don't really want to send children: [...], and moredata[...] which are really the same thing as it seems like overkill to send the same data and will slow down my response.

Condor,
Looking at createNode I don't see where it is accessing the children attribute. I would need to change something to say, hey don't look for an object named children look for an object named moredata. Maybe this is possible in the createNode but being a newbie I cannot figure it out.

Thanks so much for the help so far and if you have any other ideas please let me know.

drian
26 Feb 2011, 6:15 AM
can you paste your server code that generates the json?

forumuser1080
26 Feb 2011, 11:36 AM
No its not my server.

Condor
26 Feb 2011, 2:37 PM
Example:

loader: new Ext.tree.TreeLoader({
clearOnLoad: false,
preloadChildren: true,
createNode: function(data) {
var attrs = {
id: data.id,
text: data.name,
leaf: !data.moredata,
children: data.moredata
};
return this.constructor.prototype.createNode.call(this, attrs);
}
})

forumuser1080
27 Feb 2011, 7:37 AM
Oh I see I didn't know I could override attrs like that.

I do have one more question in general about Extjs. When I say:


root: { <some object> }


like I do for the TreePanels root config, what object am I actually creating? I.E. TreeNode, AsyncTreeNode?


here is a quick working example, thanks again Condor!!




var data = {
folder: [{
name: 'Folder 1',
folder: [{
name: 'Menu Option 23'
},{
name: 'Menu Option 24'
}]
}, {
name: 'Menu Option 2'
}, {
name: 'Menu Option 3'
}]
}

new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
collapsible: false,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({
clearOnLoad: false,
preloadChildren: true,
createNode: function(data) {
var attrs = {
id: data.id,
text: data.name,
leaf: !data.folder,
children: data.folder
};
return this.constructor.prototype.createNode.call(this, attrs);
}
}),

root: data,
rootVisible: false
}]
});

Condor
27 Feb 2011, 9:44 AM
TreeLoader.createNode creates a TreeNode for leaf:true and an AsyncTreeNode for leaf:false, but you can influence that by including 'nodeType' in the attributes.

forumuser1080
27 Feb 2011, 10:15 AM
Ah ok so its nodeType that influences that. I quess my question was more along the lines of what if I do not specify nodeType,

ie

TreePanel...

root: {
// some data but no nodeType
}

What kind of node is created? Also I cannot find nodeType in the documentation for Node TreeNode or AsyncTreeNode, I feel like I am missing something :-?