ExtJS: how to have a TreePanel with several roots?

extjs

Solution

Create a fake root node and set rootVisible to false to hide it.

Problem

I'm using ExtJS 2.2.1 In my web app, I used to have a TreePanel with a single root, like this: ``` ` |- Colors |- Blue |- Red |- Yellow ``` Now that I've realized that the top-level node does not make sense, I want to remove it and promote its children: ``` ` |- Blue |- Red |- Yellow ``` The problem is, according to the docs, a TreePanel must always have a single root. How can I make a TreePanel with several nodes ? This is my current code that creates the tree: ``` var tree = new Ext.tree.TreePanel({ animate:true, enableDD:false, loader: new Ext.tree.TreeLoader({ dataUrl: 'colors.json' }), lines: true, selModel: new Ext.tree.MultiSelectionModel(), containerScroll: true, autoScroll: true, height: 100, width: 280, rootVisible: true, root: new Ext.tree.AsyncTreeNode({ text: 'Colors', hasChildren:true, id: 1 }), el: 'tree' }); ```

Original source