PDA

View Full Version : Tree - mark some nodes



bauchinj
28 Jan 2010, 2:58 AM
Hello!

Is it possible to mark some nodes - not to select them, let's say, to change their background-color?

for example:

*) usa
-) miami
-) san francisco
-) new york
*) england
-) london
-) new hampshire

after a action, I'd like to mark let's say all cities, start with 'new '.

daanlib
28 Jan 2010, 3:08 AM
you can recursively loop over all TreeNodes and add a class name to the matched nodes by using yourTreeNode.getUI().addClass()

bauchinj
28 Jan 2010, 4:16 AM
Ext.getCmp('tree').getNodeById('nodeid').getUI().addClass('markeditem');



markeditem{
background-color:#CC6633
}

This doesn't work! Do you have more details?

daanlib
28 Jan 2010, 4:58 AM
Ext.getCmp('tree').getNodeById('nodeid').getUI().getTextEl().style.backgroundColor = "red";

this works for me, maybe you can add the class to the getTextEl() ?

bauchinj
28 Jan 2010, 5:16 AM
OK, now the text has got a background-color, but not the whole node...

bauchinj
28 Jan 2010, 5:20 AM
SOLVED:


Ext.getCmp('tree').getNodeById('nodeid').getUI().getEl().style.backgroundColor = "red";

Thank you!

daanlib
28 Jan 2010, 5:25 AM
well, do you have firebug installed? if not, do it now (http://www.getfirebug.com). using firebug you can see that that

Ext.getCmp('tree').getNodeById('nodeid').getUI().getTextEl().parentNode.parentNode
is the element you are looking for.

bauchinj
28 Jan 2010, 6:32 AM
Sorry, but I've got another Problem now:

I'm working with AsyncTree and get the id's, which should be loaded by ajax.


Ext.Ajax.request({
url : 'ajax.php',
params : {
action : 'getCity',
city : city
},
callback: function(o, success, resp){
if(success){
//get i.e. usa/new york;england/new hampshire;...
var city_arr = resp.responseText.split(";");
if(city_arr.length > 0){
Ext.getCmp('tree').getNodeById('usa').expand(false);
for(var i = 0; i < city_arr.length-1; i++){
Ext.getCmp('tree').getNodeById(city_arr[i]).getUI().getEl().style.backgroundColor = "red";
}
}
}
}
});Now my Problem:
If for example usa isn't expanded yet, backgroundColor couldn't be executed, because the ID usa/new york doesn't exist! Therefore I tried to expand it first:


Ext.getCmp('tree').getNodeById('usa').expand(false);But that makes no sense, because the for-loop run, before the tree was expanded...