Tree and panel in a master-details relationship

A master-details page interface can be built using a tree and a panel component. In this recipe, you'll use a panel to display additional details about the selected node on a TreePanel, as seen in the following screenshot:

How to do it...

1. 1. Create the styles for the tree node icons:

   report
   {
   background:url(img/pie-chart.png) 0 no-repeat !important;
   }
   dataset
   {
   background:url(img/table.png) 0 no-repeat !important;
   }
   datasource
   {
   background:url(img/data.png) 0 no-repeat !important;
   }
   

2. 2. Create the initial text for the panel body:

   var pnlBody = 'Select an item to see its information';
   

3. 3. Create and compile a template to be used on the panel body:

   var tpl = new Ext.Template('<p>{description}</p>');
   tpl.compile();
   

4. 4. Define the TreePanel:

   Ext.onReady(function() {
   var tree = new Ext.tree.TreePanel({
   height: 350,
   region:'center',
   useArrows: true,
   autoScroll: true,
   animate: true,
   enableDD: true,
   containerScroll: true,
   border: false,
   dataUrl...