title: Dropzone Tree panel to View
body: <p>I am trying to implement some drag and drop functionallity from a Tree Panel to a View but I have not been able to do this. I am new using ExtJs and maybe I am doing something wrong.
  I have my tree defined like this:</p>
  
  <pre><code>var treeMeasures = Ext.create('Ext.tree.Panel', {
      id: 'treeMeasuresPanel',
      title: 'Measures',
      region: 'north',
      store: dsMeasures,
      rootVisible: true,
      width: '100%',
      height: '50%',
      useArrows: true,
      enableDD: true,
      allowDrop: false,
      collapsible: true,
      border: 0,
      style: 'border-right:1px solid #99BCE8;border-top:none;border-left:none;border-bottom: none;',
      viewConfig: {
          listeners: {
              render: initializeFieldsDragZone
          },
          plugins: {
              ptype: 'treeviewdragdrop',
              ddGroup: 'fieldsToAreas',
              enableDrag: true,
              enableDrop: false,
              containerScroll: true
          }
      }
  });
  </code></pre>
  
  <p>The initializeFieldsDragZone function:</p>
  
  <pre><code>function initializeFieldsDragZone(v, record, item, index, evt, eOpts) {
  v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
  
      getDragData: function (e) {
          var sourceEl = e.getTarget(v.itemSelector, 10), d;
          if (sourceEl) {
              d = sourceEl.cloneNode(true);
              d.id = Ext.id();
              return v.dragData = {
                  sourceEl: sourceEl,
                  repairXY: Ext.fly(sourceEl).getXY(),
                  ddel: d,
                  controlData: v.getRecord(sourceEl).data
              };
          }
      },
  
      //      Provide coordinates for the proxy to slide back to on failed drag.
      //      This is the original XY coordinates of the draggable element.
      getRepairXY: function () {
          return this.dragData.repairXY;
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>The View:</p>
  
  <pre><code> var filterAreaView = Ext.create('Ext.view.View', {
      store: dsFilterArea,
      tpl: "",
      ddGroup: 'fieldsToAreas',
      bodyStyle: {
          background: 'ffffff'
      },
      listeners: {
              render: initializeAreasDropZone
          }        
  });
  </code></pre>
  
  <p>And the initializeAreasDropZone function is:</p>
  
  <pre><code>function initializeAreasDropZone(area) {
  var view = area.getEl();
  
  view.dropZone = Ext.create('Ext.dd.DropZone', area.el, {
  
      getTargetFromEvent: function (e) {
          return e.getTarget('.x-grid-row');
      },
  
      onNodeEnter: function (target, dd, e, data) {
  
      },
  
      onNodeOut: function (target, dd, e, data) {
  
      },
  
      onNodeOver: function (target, dd, e, data) {
          return true;
      },
  
      onNodeDrop: function (target, dd, e, data) {
  </code></pre>
  
  <p>//            My Code</p>
  
  <pre><code>        return true;
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>And the problem is that when I drag the node from the tree and try to drop into the view nothing happens.</p>
  
  <p>Does anyone knows if I am doing something wrong?</p>
  
  <p>Thanks,</p>
  
  <p>Alberto</p>