Extjs Ext JS-在具有不可见根的树面板中拖放

我试图找出是否有办法配置ExtJS树面板拖放功能，以允许树面板中的树节点传输到另一个配置了不可见根的树面板。两个树面板都配置为不显示根节点，因此树面板将显示为具有多个根节点

我创建了一个包含两个树面板的工作实现的。将文件夹条目从树1拖动到树2是可行的，因为树2的根节点已显示，但一旦我将树2的rootVisible属性设置为false，就无法将文件夹节点从树1拖放到树2。以下是来自JSFIDLE脚本的代码：

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();
});

---

我很惊讶这种情况会发生，似乎这应该是Extjs对这个功能的要求。我知道有一种复杂的方法来实现这一点，但我非常有兴趣看看是否有一种标准的方法。我在Extjs官方论坛上发布了同样的问题。目前没有任何评论。