Drag-and-drop between tree panels

Dragging and dropping nodes between two trees is an easy-to-accomplish task due to the native drag-and-drop support in the TreePanel. This recipe explains how it's done, as shown 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. Define the source tree. Be sure to enable the drag-and-drop feature:

   Ext.onReady(function() {
   var leftTree = new Ext.tree.TreePanel({
   el: 'leftTree',
   frame:true,
   width: 250,
   height:400,
   useArrows: true,
   autoScroll: true,
   animate: true,
   enableDD: true,
   dropConfig: {appendOnly:true},
   containerScroll: true,
   border: false,
   loader: {
   dataUrl: 'tree-drag-drop-trees.php',
   baseParams: { tree: 'leftTree' }
   },
   root: {
   nodeType: 'async',
   text: 'My Reporting Project',
   draggable: false,
   id: 'project'...