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.
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.
I was not able to reproduce that.Quote:
Root's children nodes were duplicated.
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, definingrecursiveparameter totrue, 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
You may prefer the following notation:Code:<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>
Code:<script type="text/javascript">
var toggleRoot = function () {
var root = App._trp.getRootNode();
if (root.isExpanded()) {
root.collapse(true);
}
else {
root.expand(true);
}
}
</script>
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.
Try the following
Code:<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>