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

Question

我正在尝试弄清楚是否有办法配置Ext JS Tree面板拖放功能，以允许树面板中的树节点转移到配置了不可见根的另一个树面板。两个树面板都配置为不显示根节点，以便树面板看起来具有多个根节点。

我创建了一个jsFiddle script，其中包含两个Tree Panel的工作实现。将文件夹条目从树1拖动到树2是有效的，因为显示了树2的根节点，但是一旦我将树2的rootVisible属性设置为false，就不可能将文件夹节点从树1拖放到树2这是jsFiddle脚本中的代码：

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