Bug with treepanel's node and expandChildren/collapseChildren functions

  1. #1

    Bug with treepanel's node and expandChildren/collapseChildren functions

    Hi,
    i have been trying to use expandChildren() and collapseChildren() methods with the root node of my treePanel, but i get a weird tree view.
    Root's children nodes were duplicated.
  2. #2
    Root's children nodes were duplicated.
    I was not able to reproduce that.

    Please post a complete (but simplified) code sample demonstrating how to reproduce the issue.

    Some more details are in our forums guidelines.
    Forum Guidelines For Posting New Topics
    More Information Required


    Use Expand and Collapse instead, defining recursive parameter to true, as shown below:

    Expand: http://docs.sencha.com/extjs/5.0.1/#...-method-expand
    Collapse: http://docs.sencha.com/extjs/5.0.1/#...ethod-collapse
    <html >
    <head runat="server">
        <script type="text/javascript">
            var toggleRoot = function () {
                var root = App._trp.getRootNode();
                root[root.isExpanded() ? 'collapse' : 'expand'](true);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            <ext:TreePanel ID="_trp" Title="Products" RootVisible="true" Width="300" Height="300" runat="server">
                <Root>
                    <ext:Node Text="Root" Expanded="false">
                        <Children>
                            <ext:Node Text="Framework" Expanded="false">
                                <Children>
                                    <ext:Node Text="Ext.Net" Icon="Building" Leaf="True" />
                                    <ext:Node Text="Sencha" Icon="Building" Leaf="True" />
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                <Buttons>
                    <ext:Button Text="Toggle Root" runat="server">
                        <Listeners>
                            <Click Handler="toggleRoot()" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:TreePanel>
        </form>
    </body>
    </html>
    You may prefer the following notation:
    <script type="text/javascript">
        var toggleRoot = function () {
            var root = App._trp.getRootNode();
            if (root.isExpanded()) {
                root.collapse(true);
            }
            else {
                root.expand(true);
            }
        }
    </script>
    Last edited by RCN; Mar 12, 2015 at 7:30 PM.
  3. #3
    Thanks Raphael,

    i forget to mention that the Root node's property RootVisible was set to false.
    So i tried your example with RootVisible(false), and there's no node displayed in the tree.
    My purpose is to display only children (collapsed) of the root node without displaying the root node.
  4. #4
    Try the following
    <html>
    <head runat="server">
        <script type="text/javascript">
            var toggleAll = function () {
                var root = App._trp.getRootNode();
                for (var index = 0; index < root.childNodes.length; index++) {
                    var node = root.childNodes[index];
    
                    node[node.isExpanded() ? 'collapse' : 'expand'](true);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            <ext:TreePanel ID="_trp" Title="Products" RootVisible="true" Width="300" Height="300" runat="server">
                <View>
                    <ext:TreeView RootVisible="false" />
                </View>
                <Root>
                    <ext:Node Text="Root" Expanded="true">
                        <Children>
                            <ext:Node Text="Framework" Expanded="false">
                                <Children>
                                    <ext:Node Text="Ext.Net" Icon="Building" Leaf="false">
                                        <Children>
                                            <ext:Node Text="A" Icon="Building" Leaf="true" />
                                            <ext:Node Text="B" Icon="Building" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Sencha" Icon="Building" Leaf="false">
                                        <Children>
                                            <ext:Node Text="C" Icon="Building" Leaf="true" />
                                            <ext:Node Text="D" Icon="Building" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                            <ext:Node Text="Framework" Expanded="false">
                                <Children>
                                    <ext:Node Text="Ext.Net" Icon="Building" Leaf="false">
                                        <Children>
                                            <ext:Node Text="E" Icon="Building" Leaf="true" />
                                            <ext:Node Text="F" Icon="Building" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Sencha" Icon="Building" Leaf="false">
                                        <Children>
                                            <ext:Node Text="G" Icon="Building" Leaf="true" />
                                            <ext:Node Text="H" Icon="Building" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                <Buttons>
                    <ext:Button Text="Toggle All" runat="server">
                        <Listeners>
                            <Click Handler="toggleAll()" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:TreePanel>
        </form>
    </body>
    </html>

Similar Threads

  1. Remove node in treepanel and add new node.
    By dinhhung09138 in forum 2.x Help
    Replies: 6
    Last Post: Mar 21, 2014, 4:50 AM
  2. Replies: 3
    Last Post: Nov 30, 2013, 10:45 AM
  3. TreePanel node loaded: true to have node cached.
    By millenovanta in forum 2.x Help
    Replies: 0
    Last Post: Nov 28, 2013, 11:32 AM
  4. Replies: 11
    Last Post: Feb 06, 2013, 5:09 PM
  5. Replies: 5
    Last Post: Jan 25, 2009, 7:48 AM

Tags for this Thread

Posting Permissions