Problems expanding Tree nodes until certain level

[Albareto]

Hi there,

I have a tree with this (basic) Store configuration:

this.store = Ext.create('Ext.data.TreeStore',
{
    proxy :
   {
        url: 'some/url',
        type : 'ajax'
    }
});

In my tree panel I have a toolbar with a button to expand the tree up to some level, for that I calculate in the server the nodes that have to be returned and I return them all at once in an object like this:

[{
    'text' : 'Corporate',
    children : 
    [{
        text : 'SA 001',
        children :
        [{
            text: 'P 001',
            children :
            [{
                  text : 'RSK 001'
             },{
                   text : 'RSK 002'
            }]
        }]
    }]
}]

I hope it is more or less clear... anyway, the point is that for loading this I just set a parameter in my request, catch it in the server and return the tree I want to see, then I want to load these nodes in the tree, as I already have them in my response, without going each time to the server to get them, what's the best approach for doing this?

I started by:

treePanel.getRootNode().expand(true);

This expands correctly the tree with only one request but then it tries to expand 'RSK 001' and 'RSK 002', so it throws two more requests and it gets the children of these nodes and load them (RSK 001 and RSK 002 are not leaf nodes).

Then I tried another approach that was expanding not recursively but doing the recursion manually, this is my approach:

panel.getRootNode().firstChild.expand(false, recursive);

var recursive = function(nodes)
{
    Ext.Array.each(nodes, function(n)
    {
        var ch = n.childNodes;
        if (ch.length > 0)
        {
            if (!n.isExpanded())
            {
                n.set('expanded', true);
            }
            Ext.Array.each(ch, function(c)
            {
                console.log('child : ' + c.get('text') + '\tappended to: ' + n.get('text'));
                n.appendChild(c);
                
            });
            var str1 = '';
            Ext.Array.each(ch, function(c) {str1+=c.get('text')+', ';});
            console.log('recursive for ' + str1);
            recursive(ch);
        }
    });
}

But I have a problem here and it is that when I append the child (at n.appendChild(c), when I get more than one node c has always the same value, say I see in the console (and when I debug it) this:
child : RSK 001 appended to: P 001

child : RSK 001 appended to: P 001

which is extremely strange. Also only one node gets appended and it appends on top of the root.
node_incorrectly.png
This is the full console.log for this problem:

child : SA 001 appended to: Corporate

recursive for SA 001,

child : P 001 appended to: SA 001

recursive for P 001,

child : RSK 001 appended to: P 001

child : RSK 001 appended to: P 001

recursive for RSK 002, RSK 001,



And here there is an screenshot of what should happen:
correct.png
Does anyone have any idea why is this happening? I couldn't find a good reason for it...

Any help is highly appreciated, not only for solving the recursive function problem, but just to load the nodes all at once without trying to expand RSK 001 and RSK 002, other approaches are also welcomed, I just created the recursive function for this problem, so I can just remove it if it is not needeed.

Thanks!

[tvanzoelen]

First for the nodes that are leafs set

leaf: true

in your json return data

[Albareto]

Thanks for the reply.

Unfortunately I have no leaf nodes in this particular case. I mean, the RSK 001 and RSK 002 nodes are not leafs, they have children (that children are leafs), it is just they don't have to be expanded in this function. If I say that they are leafs probably cannot be expanded manually, right? But they should...

[Albareto]

To clarify a bit, this is the full tree expanded, but I only want to expand until the RSK level and in one request:

[tvanzoelen]

But I do not quite understand , you append nodes to other nodes wich are already appended in the tree.

 
Ext.Array.each(ch, function(c)
            {
                console.log('child : ' + c.get('text') + '\tappended to: ' + n.get('text'));
                n.appendChild(c);
                
  });

But first to tackle this problem and check if all is well properly loaded. Expoand the root and on callback call tree.expandAll(). Just to check if all is there.

[Albareto]

Yes, I append nodes to nodes that are appended, is not that the way to create the tree lazily?

If with the current code I expandAll in the callback:

panel.getRootNode().firstChild.expand(false, function(){panel.expandAll();});

I get my tree fully expanded (also leaf nodes like CNT 001, CNT 002, etc), as shown in the previous picture and extra requests are thrown.

[tvanzoelen]

Yes, I append nodes to nodes that are appended, is not that the way to create the tree lazily?

That I do not understand. I think you only can append non exting nodes.

and extra requests are thrown.

Thats probably because you havent set the leaf property on the last nodes. It will try to load them if you expand these nodes.

But all nodes are there. You could first collect the nodes you want to expand. (The lower ones). For each node you want to expand you can call expandNode or expandPath on the tree.

[Albareto]

That I do not understand. I think you only can append non exting nodes.

You nailed it! I was looking in the incorrect place but after reading this sentence I started to look to the big picture and fixed the problem. As you said the nodes already existed and actually they were loaded, but not expanded! I just had to expand them manually. Here is my solution:

var openRecursive = function(node)
                        {
                            var ch = node.childNodes;
                            if (ch.length > 0)
                            {
                                if (!node.isExpanded())
                                {
                                    node.expand();
                                }
                                Ext.Array.each(ch, function(c)
                                {
                                    openRecursive(c);
                                });
                            }
                        };
                        panel.store.load(
                        {
                            node : panel.getRootNode().firstChild, 
                            callback : function()
                            {
                                openRecursive(panel.getRootNode());
                            }
                        });

Thanks a lot man!

[tvanzoelen]

well nice it is fixed!