The multi-column TreePanel

This recipe describes how to add grid view-like features to a TreePanel using a plugin, as seen in the following screenshot:

Getting ready...

The column-tree.css, column-tree.js, and ColumnNodeUI.js files used in this recipe can be obtained from the Ext JS 3.0 samples page at http://extjs.com/deploy/dev/examples/tree/column-tree.html.

How to do it...

1. 1. Add the styles needed for the multi-column tree:

   <link href="column-tree.css" rel="stylesheet" type="text/css" />
   

2. 2. Add the ColumnNodeUI class and ColumTree class definitions, contained in the ColumnNodeUI.js and column-tree.js files:

   <script type="text/javascript" src="../ux/ColumnNodeUI.js"></script>
   <script src="column-tree.js" type="text/javascript"></script>
   

3. 3. Create an instance of the ColumnTree class:

   Ext.onReady(function() {
   var tree = new Ext.tree.ColumnTree({
   width: 620,
   height: 300,
   rootVisible: false,
   autoScroll: true,
   title: 'Product Backlog',
   renderTo: Ext.getBody(),
   

4. 4. In...