ExtJS: how to have a TreePanel with several roots


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({
  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', 
      id: 1
  el: 'tree'

Best Solution

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

Related Question