Extjs - How to color a node in a tree (dynamically)


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // First some CSS !!!!!
  2.  
  3. /* node color override, in case it has entries */
  4. .x-tree-node .x-tree-selected a span{
  5. background : #FF0000;
  6. color : yellow;
  7. }
  8.  
  9. /* node color override, in case it has entries */
  10. .x-tree-node .x-tree-has-children.x-tree-selected a span{
  11. background :#FF0000;
  12. color :yellow !important;
  13. }
  14.  
  15. /* node color override, in case it has entries */
  16. .x-tree-node .x-tree-has-children a span{
  17. color : #FF5500;
  18. }
  19.  
  20. // Now some Javascript !!!!
  21.  
  22.  
  23. // Initial Extjs TreeLoader
  24.  
  25. var treeLoader = new Ext.tree.TreeLoader({
  26. url : zap.rt+'plan/load',
  27. baseParams : {
  28. 'parameter' : 'w.structure.loadstruc',
  29. 'book' : 0
  30. },
  31.  
  32. // this below is using the config attributes of the node to do
  33. // some testing. The attr.has_events is coming from the loader in PHP
  34. createNode: function(attr) {
  35. if (attr.has_events === true) {
  36. attr.cls = 'x-tree-has-children';
  37. }
  38. return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
  39. }
  40. });
  41.  
  42.  
  43. // Dynamically changing the color
  44.  
  45. // This function is part of a class, which is containing the TreeStructure
  46. // here that is called MagicTree (that's the name is use). The colornode is
  47. // the id (integer) of the node to be colored
  48. // We seek the node by its Id and then we get its UI by the getUI()
  49. // The needs_color is just a boolean value that is true or false
  50.  
  51. ColorThisNode : function (colornode, needs_color) {
  52.  
  53. var node = this.MagicTree.getNodeById( colornode );
  54. var ui = node.getUI();
  55.  
  56. if (needs_color === false) {
  57. ui.removeClass('x-tree-has-children');
  58. } else {
  59. ui.addClass('x-tree-has-children');
  60. }
  61. }
  62.  
  63. // Use you imagination and use it in your application, works fine with me!

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.