Advanced Search

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

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

Expand | Embed | Plain Text

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.