Drag-and-drop from a tree to a panel

This is another take on the master-details interfaces with a tree and a panel component, but this time it has the ability to drop tree nodes onto the details panel, as shown below:

After a node is dropped on the panel, the panel will display the underlying data object's description, 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 to show on the details panel:

   var pnlBody='Drop an item to see its description';
   

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

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

4. 4. Define the TreePanel:

   Ext.onReady(function() {
   var tree = new Ext.tree.TreePanel({
   height: 350,
   region:'center',
   useArrows...