ExtJS: how to have a TreePanel with several roots ?

Question

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'
});

Answer 1

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