1. #1
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default Answered: Problems expanding Tree nodes until certain level

    Answered: Problems expanding Tree nodes until certain level


    Hi there,

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

    Code:
    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:

    Code:
    [{
        '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:
    Code:
    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:

    Code:
    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!

  2. 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.

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    First for the nodes that are leafs set
    Code:
    leaf: true
    in your json return data

  4. #3
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default


    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...

  5. #4
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default


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

  6. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

    Code:
     
    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.

  7. #6
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default


    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:
    Code:
    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.
    Last edited by Albareto; 8 Nov 2012 at 2:28 AM. Reason: add extra info

  8. #7
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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.

  9. #8
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default Van haarte bedankt voor uw tijd en moeite.

    Van haarte bedankt voor uw tijd en moeite.


    Quote Originally Posted by tvanzoelen View Post
    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:

    Code:
    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!

  10. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    well nice it is fixed!

Thread Participants: 1

Tags for this Thread