Tree non-async creation "bug" - Ext JS

When building a tree without using a treeloader, I can't seem to be able to specify the children of a node. Instead, I have to manually call "new Ext.tree.TreeNode()" for every node I want and then manually add it to the tree using the appendChild() method. Ideally, we should be able to pass a config as deep as necessary (like we can with AsyncTreeNode) and it'll all get added to the tree.

Does not work (grandchildren aren't created):

      Ext.onReady(function() { 
       
         var tree = new Ext.tree.TreePanel('tree'); 

         var root = new Ext.tree.TreeNode({ 
            text : 'My Root', 
            id : 'my-root'
         }); 
         
         tree.setRootNode(root);

         var child1 = new Ext.tree.TreeNode({ text: 'Child 1', id: 'child-1' });
         var child2 = new Ext.tree.TreeNode({ text: 'Child 2', id: 'child-2' });
         var child3 = new Ext.tree.TreeNode({ text: 'Child 3', id: 'child-3', children: [ 
                  { text: 'Grandchild 1', id: 'grandchild-1' }, 
                  { text: 'Grandchild 2', id: 'grandchild-2' } 
               ]});
          root.appendChild(child1, child2, child3);
          
         tree.render(); 
      });

Also does not work (children aren't even created):

      Ext.onReady(function() { 
       
         var tree = new Ext.tree.TreePanel('tree'); 

         var root = new Ext.tree.TreeNode({ 
            text : 'My Root', 
            id : 'my-root', 
            children: [ 
               { text: 'Child 1', id: 'child-1' }, 
               { text: 'Child 2', id: 'child-2' }, 
               { text: 'Child 3', id: 'child-3', children: [ 
                  { text: 'Grandchild 1', id: 'grandchild-1' }, 
                  { text: 'Grandchild 2', id: 'grandchild-2' } 
               ]} 
            ] 
         }); 
          
         tree.setRootNode(root);      // Generates error: tree has no properties! 
          
         tree.render(); 
      });

  #2  

03-04-2007, 09:21 PM

---

In order to get the automated conversion of JSON to nodes, it goes through the TreeLoader. Think of the TreeLoader as not only loading through the server, but also in the browser as well. So you need to use an AsyncTreeNode instead of TreeNode. Luckily this involves no extra work.

  #3  

03-04-2007, 10:06 PM

---

Ok, fair enough. So, theoretically, changing Ext.tree.TreeNode to Ext.tree.AsyncTreeNode should do the trick. However, the following doesn't work:

      Ext.onReady(function() { 
       
         var tree = new Ext.tree.TreePanel('tree'); 

         var root = new Ext.tree.AsyncTreeNode({ 
            text : 'My Root', 
            id : 'my-root', 
            children: [ 
               { text: 'Child 1', id: 'child-1' }, 
               { text: 'Child 2', id: 'child-2' }, 
               { text: 'Child 3', id: 'child-3', children: [ 
                  { text: 'Grandchild 1', id: 'grandchild-1' }, 
                  { text: 'Grandchild 2', id: 'grandchild-2' } 
               ]} 
            ] 
         }); 
          
         tree.setRootNode(root);
          
         tree.render(); 
      });

It shows a folder with a plus next to "My Root", but clicking it it switches to the spinning loading image but never does anything after that. There aren't any JS errors and the children are never loaded.

Thinking maybe it's just an issue with trying to stuff all that in the root before it's set as the root node, I tried this:

      Ext.onReady(function() { 
       
         var tree = new Ext.tree.TreePanel('tree'); 

         var root = new Ext.tree.TreeNode({ 
            text : 'My Root', 
            id : 'my-root'
         }); 
          
         tree.setRootNode(root);
          
         var child1 = new Ext.tree.TreeNode({ text: 'Child 1', id: 'child-1' }); 
         var child2 = new Ext.tree.TreeNode({ text: 'Child 2', id: 'child-2' }); 
         var child3 = new Ext.tree.AsyncTreeNode({ text: 'Child 3', id: 'child-3', children: [ 
                   { text: 'Grandchild 1', id: 'grandchild-1' }, 
                   { text: 'Grandchild 2', id: 'grandchild-2' } 
               ]}); 
         root.appendChild(child1, child2, child3); 

         tree.render(); 
      });

The AsyncTreeNode always ends up spinning when you try to expand it.

  #4  

03-04-2007, 10:09 PM

---

> In order to get the automated conversion of JSON to nodes, it goes through the TreeLoader

  #5  

03-04-2007, 10:19 PM

---

Ok, so the solution is to explicitly define a loader for the TreePanel.

      Ext.onReady(function() { 
       
        var tree = new Ext.tree.TreePanel('tree', {
          loader: new Ext.tree.TreeLoader()
        }); 

        var root = new Ext.tree.AsyncTreeNode({ 
          text : 'My Root', 
          id : 'my-root', 
          children: [ 
            { text: 'Child 1', id: 'child-1', leaf: true }, 
            { text: 'Child 2', id: 'child-2', leaf: true }, 
            { text: 'Child 3', id: 'child-3', children: [ 
              { text: 'Grandchild 1', id: 'grandchild-1', leaf: true }, 
              { text: 'Grandchild 2', id: 'grandchild-2', leaf: true } 
            ]} 
          ] 
        }); 
        
        tree.setRootNode(root);
        
        tree.render(); 
      });

Notice I also indicated which nodes are leaves. If you don't do that then attempting to expand a leaf node will result in a never-ending loading indicator.

  #6  

03-05-2007, 08:55 AM

---

Thanks for figuring this out Jeff/Jack. I tried 20 different ways to get this to work and, I don't think I would have ever thought to try that...

loader: new Ext.tree.TreeLoader()

Simeon