mappingFunction in TreeNode

[crp_spaeth]

Hi there,
My backendsystem doesn't sent the Data in the way a Standard Ext.tree.TreeNode consumes it, so I needed a kind of mapping to map attributes comming from the Server to the correct attributes of the treenode.

I found a way to do that by extending Ext.tree.AsyncTreeNode the following way:


Ext.tree.MappedTreeNode = function(attributes){

// mapping
if(typeof attributes == "string"){
attributes = {text: attributes};
} else {
attributes = this.mapAttributes(attributes);
attributes = attributes || {};
}

Ext.tree.MappedTreeNode.superclass.constructor.call(this, attributes);
}

Ext.extend(Ext.tree.MappedTreeNode, Ext.tree.AsyncTreeNode, {

/**
* Override this function to map the Serverresponse to your actual Treeode
* @param {Object} attr attributes as respond by the Server
* @return {Object} attributes as they are consumable by the TreeNode
*/
mapAttributes: function(attr){
return attr;
}//,



});

This makes it realy easy to implement your own TreeNodes with its own mapping

For Example you can implement a node that consumes the following response:


{EXTID:'nodeid1', name: 'a text', text:'another Text', nodeType: 'TestNode'}

All you need to do is Create your own NodeType in the following way:



MyAPP.TestNode = Ext.extend(Ext.tree.MappedTreeNode, {

// override the mapAttributes function
mapAttributes: function(unMappedAttr) {
var mappedAttr = {};

mappedAttr.id = unMappedAttr.EXTID;
mappedAttr.text = name + ' ' + text;
return mappedAttr;
}

});
// register the nodeType

if(!Ext.tree.TreePanel.nodeTypes) {
Ext.tree.TreePanel.nodeTypes = {};
}
Ext.tree.TreePanel.nodeTypes["TestNode"] = MyAPP.TestNode;

I think something like that would be really helpful in the standard?

What do you think

[Animal]

I'd like it if every Node were backed by an Ext.data.Record in which it used the Fields named "text", "cls", "iconCls", "href" etc.

And then a TreeNodeReader would be used by the TreeLoader to convert the raw data, mapped in a manner you describe into the Records for each Node.

That way would also make Drag/Drop involving Trees easier.

It has become an established pattern, that dragData contains a Record (or Array or Records) which encapsulate the data being moved.

[crp_spaeth]

I am waiting for a kind of TreeStore aswell... :)
I think the tree one one last component that doesn't implement the nice "strore, reader/writer record" concept...

[Condor]

You can do this currently by overriding createNode, e.g.

loader: new Ext.tree.TreeLoader({
...
createNode: function(attrs) {
this.constructor.prototype.createNode.call(this, {
id: attrs.EXTID,
text: attrs.name + ' ' + attrs.text
});
}
})