title: Ext JS - Drag and drop in tree panels with invisible root
body: <p>I'm trying figure out if there's a way to configure the Ext JS Tree panel drag and drop feature to allow a tree node from a Tree Panel to be transferred to another Tree Panel that is configured with an invisible root. Both tree panels are configured not to show the root node so that the tree panel will appear to have multiple root nodes. </p>
  
  <p>I created a <a href="http://jsfiddle.net/tZSeB/4/" rel="nofollow">jsFiddle script</a> which contains a working implementation of two Tree Panels. Dragging the folder entry from Tree 1 to Tree 2 works because the root node for Tree 2 is shown, but once I set the rootVisible property of Tree 2 to false, it's not possible to drag and drop the folder nodes from Tree 1 to Tree 2. Here's the code from the jsFiddle script:</p>
  
  <pre><code>Ext.onReady(function () {
      Ext.define('Folder', {
          extend: 'Ext.data.Model',
          fields: [{
              name: 'id',
              type: 'int'
          }, {
              name: 'parentId',
              type: 'int'
          }, {
              name: 'name',
              type: 'string'
          }]
      });
  
  
      var store1 = Ext.create('Ext.data.TreeStore', {
          model: 'Folder',
          proxy: {
              type: 'memory',
              reader: {
                  type: 'json',
                  root: 'folders'
              }
          }
      });
  
  
      var tree1 = Ext.create('Ext.tree.Panel', {
          itemId: 'tree1',
          store: store1,
          rootVisible: false,
          useArrows: true,
          flex: 1,
          title: 'Tree 1',
          root: [],
          columns: [{
              xtype: 'treecolumn',
              dataIndex: 'name',
              flex: 1
          }],
          viewConfig: {
              plugins: {
                  ptype: 'treeviewdragdrop',
                  appendOnly: true,
                  dragGroup: 'firstTreeDDGroup',
                  dropGroup: 'secondTreeDDGroup'
              }
          },
          listeners: {
              afterrender: function (tree) {
                  var root = tree.getRootNode();
  
  
                  // load static data
                  root.appendChild([{
                      id: 1,
                      parentId: -1,
                      name: 'Folder 1',
                      expanded: true,
                      folders: [{
                          id: 11,
                          parentId: 1,
                          name: 'Folder 1.1',
                          folders: []
                      }, {
                          id: 12,
                          parentId: 1,
                          name: 'Folder 1.2',
                          folders: []
                      }]
                  }, {
                      id: 2,
                      parentId: -1,
                      name: 'Folder 2',
                      folders: [{
                          id: 21,
                          parentId: 2,
                          name: 'Folder 2.1',
                          folders: []
                      }, {
                          id: 22,
                          parentId: 2,
                          name: 'Folder 2.2',
                          folders: []
                      }]
                  }]);
              }
          }
      });
  
  
      var store2 = Ext.create('Ext.data.TreeStore', {
          model: 'Folder',
          proxy: {
              type: 'memory',
              reader: {
                  type: 'json',
                  root: 'folders'
              }
          }
      });
  
  
      var tree2 = Ext.create('Ext.tree.Panel', {
          itemId: 'tree2',
          store: store2,
          rootVisible: true,
          useArrows: true,
          flex: 1,
          title: 'Tree 2',
          root: [],
          columns: [{
              xtype: 'treecolumn',
              dataIndex: 'name',
              flex: 1
          }],
          viewConfig: {
              plugins: {
                  ptype: 'treeviewdragdrop',
                  allowContainerDrop: true,
                  allowParentInsert: true,
                  appendOnly: true,
                  dragGroup: 'secondTreeDDGroup',
                  dropGroup: 'firstTreeDDGroup'
              }
          }
      });
  
  
      Ext.create('Ext.window.Window', {
          width: 550,
          height: 300,
  
  
          layout: {
              type: 'hbox',
              align: 'stretch'
          },
  
  
          items: [tree1, tree2]
      }).show();
  });
  </code></pre>