ExpandChildren does not work

[Maxence@stereograph]

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

{    "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'):

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:

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.

[mitchellsimoens]

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

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.

[Maxence@stereograph]

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.

[Maxence@stereograph]

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.

[evant]

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

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
                        }]
                    }]
                }]
            }]
        }
    })
    
});

[Maxence@stereograph]

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

[evant]

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

[Maxence@stereograph]

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?

[evant]

No, 4.1.3 is:

Build date: 2012-10-25 15:13:53 (240477695016a85fb9ed1098fd5f8e116327fcc3)