PDA

View Full Version : TreeLoader createNode custom text in each node (from the server)



etd
22 Oct 2013, 7:42 PM
Hi,

There, I'm trying to use a "color" value returned by the server (via Ajax/AsynTreeNode) to set the colour of each node in the tree. For instance, this is the json I'd get for a node:

{"id":1452, "text": "Foo", "color": "#dd22aa"}



my.NodesLoader = Ext.extend(Ext.tree.TreeLoader, {
listeners: {
'load':function(loader,node,response){
node.cascade(function(n){
if (n.ui.getTextEl())
{
n.ui.getTextEl().style.color = n.attributes.color;
}
return true;
})
}
}
});


This works fine to colour the 1st level of nodes, but when I expand any of the top-level nodes, the children nodes don't get colourised. What am I missing?

Many thanks,
Daniel

willigogs
23 Oct 2013, 2:24 AM
Have you tried adding this listener to the actual treepanel, rather than the treeloader?

I imagine this function will only run once (when the tree first loads)...

etd
23 Oct 2013, 3:10 AM
(Now) I've tried both:


this.on('load', function(node){
node.cascade(function(n){
if (n.ui.getTextEl())
{
n.ui.getTextEl().style.color = n.attributes.color;
}
});
});

And


this.on('append', function(tree, parent, node, index){
if (node.ui.getTextEl())
{
node.ui.getTextEl().style.color = node.attributes.color;
}
});


Once you click / expand the node, the even triggers with a valid getTextEl() and the colour is applied. But the user has to click on them or otherwise interact. I haven't been able to figure out a way to trigger an 'after render' callback for the nodes that will fire after getTextEl() becomes available...

Thanks for your response though.

p.s. just to clarify, if I omit the n.ui.getTextEl() check, the node fails to render as the text element may not be available yet when the callback is invoked.

etd
24 Oct 2013, 8:09 PM
I've found the solution by combining a a "load" listener for the TreeLoader with an "expand" listener for each node.

This is the full source of my custom TreeLoader:



dradis.NodesLoader = Ext.extend(Ext.tree.TreeLoader, {
createNode : function(attr){
var node = Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
node.on('expand', function(n){
n.cascade(function(cn){
if (cn.ui.getTextEl())
{
cn.ui.getTextEl().style.color = cn.attributes.color;
}
return true;
});
});
return node;
},

listeners: {
'load':function(loader,node,response){
node.cascade(function(n){
if (n.ui.getTextEl())
{
n.ui.getTextEl().style.color = n.attributes.color;
}
return true;
});
}
}
});


The "load" listener is triggered when the root node is loaded and the "expand" node for every other node.

HTH someone else.