Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    France
    Posts
    7
    Vote Rating
    0
    Maxence@stereograph is on a distinguished road

      0  

    Default ExpandChildren does not work

    ExpandChildren does not work


    In my ASP.NET application I use the Sencha treegrid. When I want to expand children recursively, if my node is already expanded, it does not expand its children. I know there is already a post related to the same bug (http://www.sencha.com/forum/showthread.php?137719) but I'm not sure the bug has been resolved.


    Ext version tested:
    • Ext 4.1.3
    Browser versions tested against:
    • Chrome 22
    Description:
    • Ext.data.NodeInterface - expandChidren(true) does not expand children of an expanded node.
    Steps to reproduce the problem:
    • Create an treePanel. Your datas need to have children, and those children need to have children too.
    example (myFile : treegrid.js) :
    Code:
    {    "text":".",
        "children":
        [
            {
                task:'Project: Shopping',
                duration:13.25,
                user:'Tommy Maintz',
                expanded: true,
                children:
                [
                    {
                        task:'Housewares',
                        duration:1.25,
                        user:'Tommy Maintz',
                        children:
                        [
                            {
                                task:'Kitchen supplies',
                                duration:0.25,
                                user:'Tommy Maintz',
                            },
                            {
                                task:'Groceries',
                                duration:.4,
                                user:'Tommy Maintz',
                            },
                            {
                                task:'Cleaning supplies',
                                duration:.4,
                                user:'Tommy Maintz',
                            },
                            {
                                task: 'Office supplies',
                                duration: .2,
                                user: 'Tommy Maintz',
                            }
                        ]
                    }, 
                    {
                        task:'Remodeling',
                        duration:12,
                        user:'Tommy Maintz',
                        expanded: true,
                        children:
                        [
                            {
                                task:'Retile kitchen',
                                duration:6.5,
                                user:'Tommy Maintz',
                            },
                            {
                                task:'Paint bedroom',
                                duration: 2.75,
                                user:'Tommy Maintz',
                                children: 
                                [
                                    {
                                        task: 'Ceiling',
                                        duration: 1.25,
                                        user: 'Tommy Maintz',
                                    }, 
                                    {
                                        task: 'Walls',
                                        duration: 1.5,
                                        user: 'Tommy Maintz',
                                    }
                                ]
                            },
                            {
                                task:'Decorate living room',
                                duration:2.75,
                                user:'Tommy Maintz',
                            },
                            {
                                task: 'Fix lights',
                                duration: .75,
                                user: 'Tommy Maintz',
                            }, 
                            {
                                task: 'Reattach screen door',
                                duration: 2,
                                user: 'Tommy Maintz',
                            }
                        ]
                    }
                ]
            },
            {
                task:'Project: Testing',
                duration:2,
                user:'Core Team',
                children:
                [
                    {
                        task: 'Mac OSX',
                        duration: 0.75,
                        user: 'Tommy Maintz',
                        children: 
                        [
                            {
                                task: 'FireFox',
                                duration: 0.25,
                                user: 'Tommy Maintz',
                            }, 
                            {
                                task: 'Safari',
                                duration: 0.25,
                                user: 'Tommy Maintz',
                            }, 
                            {
                                task: 'Chrome',
                                duration: 0.25,
                                user: 'Tommy Maintz',
                            }
                        ]
                    },
                    {
                        task: 'Windows',
                        duration: 3.75,
                        user: 'Darrell Meyer',
                        children: 
                        [
                            {
                                task: 'FireFox',
                                duration: 0.25,
                                user: 'Darrell Meyer',
                            }, 
                            {
                                task: 'Safari',
                                duration: 0.25,
                                user: 'Darrell Meyer',
                            }, 
                            {
                                task: 'Chrome',
                                duration: 0.25,
                                user: 'Darrell Meyer',
                            },
                            {
                                task: 'Internet Exploder',
                                duration: 3,
                                user: 'Darrell Meyer',
                            }
                        ]
                    },
                    {
                        task: 'Linux',
                        duration: 0.5,
                        user: 'Aaron Conran',
                        children: 
                        [
                            {
                                task: 'FireFox',
                                duration: 0.25,
                                user: 'Aaron Conran',
                            }, 
                            {
                                task: 'Chrome',
                                duration: 0.25,
                                user: 'Aaron Conran',
                            }
                        ]
                    }
                ]
            }
        ]
    }

    in the following example:
    when we call expandChildren(true) on the root node, it does not expand Housewares because the execution stops when it notices that Project: Shopping is already expanded.

    treeGrid.png


    The result that was expected:
    • ExpandChildren(true) have to expand all children, even if the parent node is already expanded
    The result that occurs instead:
    • it does not expand children of already expanded node.
    Operating System:
    • Windows 7 pro Visual Studio 2010
    I think the problem comes from here:
    in ext-all.js (I use the debug version), in node interface definition (Ext.define('Ext.data.NodeInterface'):
    Code:
    expandChildren: function (recursive, callback, scope) {  
                      var me = this,
                            i = 0,
                            nodes = me.childNodes,
                            ln = nodes.length,
                            node,
                            expanding = 0;
    
    
    
    
                        for (; i < ln; ++i) {
                            node = nodes[i];
                            console.log("in expandChildren node", node.data.task);
                            if (!node.isLeaf() && !node.isExpanded()) {
                                expanding++;
                                nodes[i].expand(recursive, function () {
                                    expanding--;
                                    if (callback && !expanding) {
                                        Ext.callback(callback, scope || me, [me.childNodes]);
                                    }
                                });
                            }
                        }
    
    
    
    
                        if (!expanding && callback) {
                            Ext.callback(callback, scope || me, [me.childNodes]);
                        }
                    },
    I think it could be better like this:
    Code:
    expandChildren: function (recursive, callback, scope) {                   
                      var me = this,
                            i = 0,
                            nodes = me.childNodes,
                            ln = nodes.length,
                            node,
                            expanding = 0;
    
    
    
    
                        for (; i < ln; ++i) {
                            node = nodes[i];
                            console.log("in expandChildren node", node.data.task);
                            if (!node.isLeaf() && !node.isExpanded()) {
                                expanding++;
                                nodes[i].expand(recursive, function () {
                                    expanding--;
                                    if (callback) { //without testing if it's expanded because we test it in the expand method.
                                        Ext.callback(callback, scope || me, [me.childNodes]);
                                    }
                                });
                            }
                        }
    
    
    
    
                        if (!expanding && callback) {
                            Ext.callback(callback, scope || me, [me.childNodes]);
                        }
                    },

    if you have a solution to resolve the problem without updating Sencha code, I am in.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just tested with the check-tree.html example with this in the console:

    Code:
    Ext.ComponentQuery.query('treepanel')[0].store.tree.root.firstChild.expandChildren(true)
    after expanding the Grocery List node and it expands the Energy food node for me.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Location
    France
    Posts
    7
    Vote Rating
    0
    Maxence@stereograph is on a distinguished road

      0  

    Default


    I have tried Ext.ComponentQuery.query('treepanel')[0].store.tree.root.firstChild.expandChildren(true) and it does not work, but it works with Ext.ComponentQuery.query('treepanel')[0].store.tree.root.firstChild.expand(true)

    I'll try to figure out why it doesn't work in my code.

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Location
    France
    Posts
    7
    Vote Rating
    0
    Maxence@stereograph is on a distinguished road

      0  

    Default


    I have tried what you tell me in the treeGrid example and it does not work like in check-tree example,

    I have tried this :
    - Ext.ComponentQuery.query('treepanel')[0].store.tree.root.expandChildren(true)
    - Ext.ComponentQuery.query('treepanel')[0].store.tree.root.expand(true)
    - Ext.ComponentQuery.query('treepanel')[0].store.tree.root.firstChild.expandChildren(true)
    - Ext.ComponentQuery.query('treepanel')[0].store.tree.root.firstChild.expand(true)
    and this expand only the second child (Project:Testing) and it collapse the first child (Project: Shopping), the one is expanded on load.

    Thanks for your answer.

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,008
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I can't reproduce this, please post a full test case:

    Code:
    Ext.onReady(function() {
        
        var tree = Ext.create('Ext.tree.Panel', {
            width: 400,
            height: 400,
            renderTo: document.body,
            tbar: [{
                text: 'Expand',
                handler: function() {
                    tree.getRootNode().expandChildren(true);
                }    
            }],
            root: {
                text: 'Root',
                expanded: true,
                children: [{
                    text: 'Child 1',
                    expanded: true,
                    children: [{
                        text: 'Child 2',
                        children: [{
                            text: 'Child 3',
                            children: [{
                                text: 'Child 4',
                                leaf: true
                            }]
                        }]
                    }]
                }]
            }
        })
        
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User
    Join Date
    Nov 2012
    Location
    France
    Posts
    7
    Vote Rating
    0
    Maxence@stereograph is on a distinguished road

      0  

    Default


    I've tried your example and with it you can reproduce my bug.

    If you want to reproduce it, you first have to expand "Child 1" like this (as it is when you load the page):

    sencha.png

    And then, click on the Expand button.

    As you can notice, nothing happens whereas it should recursively expand Child2. It doesn't work since Child1 is already marked as expanded.

    Nevertheless, if you collapse Child1 as shown in the following picture and then press Expand, then it recursively expands everything like expected.

    sencha expandChildren.png


    sencha final.png

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,008
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I don't think we're on the same page here. Please see the attached screen capture. I'm using 4.1.3 with my test case: http://screencast.com/t/pbxoo2AmHC
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Sencha User
    Join Date
    Nov 2012
    Location
    France
    Posts
    7
    Vote Rating
    0
    Maxence@stereograph is on a distinguished road

      0  

    Default


    Glad to know it works for you. That must mean that I don't have the right version of Sencha. I use ext-all.js which contains the following lines at the top:

    This file is part of Ext JS 4.1
    [..]
    Build date: 2012-04-20 14:10:47

    Is it the right build?

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,008
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    No, 4.1.3 is:

    Build date: 2012-10-25 15:13:53 (240477695016a85fb9ed1098fd5f8e116327fcc3)
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!