ExtJs 4 - 从树拖到“空”树

Question

从一棵树拖到另一棵树时，ExtJS 遇到问题。

我有一棵树，sourceTree，其中包含可从中拖动的所有元素。

我有另一棵树，targetTree，它有望包含从源树中拖动（选择）的所有元素。

var sourceStore = Ext.create('Ext.data.TreeStore', {
    model: 'MyTreeModel',
    proxy: {
        type: 'ajax',
        url: '/some_action_that_returns_tree_json',
        extraParams: { /*extra params*/
        },
        reader: {
            type: 'json',
            root: function (o) {
                if (o.children == null) {
                    return o.children;
                } else {
                    return o;
                }
            }
        }
    },
    folderSort: true
});

源树定义为：

{
    xtype: 'treepanel',
    flex: 5,
    iconCls: 'myiconcls',
    border: true,
    store: formstore,
    loadMask: true,
    rootVisible: false,
    title: 'Source',
    bodyStyle: 'font-style:bold',
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            appendOnly: true
        }
    }
}

所以我有一个可以从中拖动的源树。

目标树定义为：

{
     xtype: 'treepanel',
     flex: 5, iconCls: 'mytreecls',
     border: true, 
     store: emptystore,
     rootVisible: false,
     title: 'Selected', 
     bodyStyle: 'font-style:bold',
     viewConfig: {
        emptyText: '',
        plugins: {
           ptype: 'treeviewdragdrop',
           allowContainerDrop: true,
           appendOnly: true
        },
        listeners: {
            drop: function (node, data, model, dropPosition, opts) {
                console.log(node);
            }
        }
    } 
}

我遇到的第一个问题是如何定义一个具有单个根节点的空树存储，如果未加载节点的数据，该根节点将调用代理 url。

源树将动态加载叶节点，如果我将它们拖动并添加到目标树，我想保留该功能。

我已经尝试了很多方法来设置默认根节点 - 但没有一个能够工作。

var emptystore= Ext.create('Ext.data.TreeStore', {
    model: 'TreeModel',
    proxy: {
        type: 'ajax',
        url: '/some_action_that_returns_tree_json',
        extraParams: { ... },
        reader: {
            type: 'json',
            root: { text:"My Root",...} // doesn't work, presumably becuase the ajax call overwrite it?
            }
        }
    }
});

最终结果应该是一个源树，我可以将其拖到另一棵树中。我不想删除我认为由 treeviewdragdrop 的 appendOnly 属性控制的拖动节点。我试图通过将 allowContainerDrop 设置为 true 来处理面板/容器上的掉落。

老实说，这是我第一次尝试 ExtJS D&D，所以感谢任何帮助。我显然已经阅读了教程，但找不到我的树对树 D&D。

预先感谢，

山姆