View Full Version : How toggle display of root node of TreePanel dynamically

12 May 2011, 4:23 AM
I am using ExtJS 3.3 TreePanel. In my tree panel, I have four children under root node.

I need to show/hide rootNode on button click. TreePanel has one config option 'rootVisible' that can be specified at TreePanel creation. I tried
rootNode.ui.hide() but it also hides all the child nodes of root node. I need to hide root node only.

How can I toggle display of root node of TreePanel dynamically.


12 May 2011, 11:45 AM
It appears that rootVisible is only available at config time, not runtime; note the lack of setRootVisible()/getRootVisible() methods in the API.

Also, hiding a node implicitly hides all its children, so I guess that's considered that to be 'working as designed'.

In short, I don't think there's an easy/API-native way to do what you want...

12 May 2011, 9:30 PM
I have searched the docs but could not find any such api. There must be some way to hide root node UI.

Anyone-else who had faced similar problem?

9 Dec 2011, 12:36 PM
We are using the rootVisible property (set in config) to hide the root node. It works fine and the children nodes ARE present. So, the tree looks as though there are two (or more) root nodes, when really, the root is there but hidden.

When I first tried it, it did not work however. But then a co-worker found that without the root node, a couple of our overridden methods were failing. Those methods were:

Ext.override(Ext.tree.TreeNodeUI, {
beforeLoad: function() {
, afterLoad: function() {

Hopefully this will help someone else...