Could anyone show me the way to solve my problem?

I tried samples under my environment, and they worked very well.

1) Drag and Drop ordering in a TreePanel
http://docs.sencha.com/ext-js/4-0/#!/example/tree/reorder.html

2) Drag and Drop betweens two TreePanels
http://docs.sencha.com/ext-js/4-0/#!/example/tree/two-trees.html

But,
1) works only inside the one penel.
2) works when the one panel (the right side panel in the sample) is empty.

I want to make an application which allows us to drag and drop files and folders between two folder panels which are not empty.

I attach some files I made as below.
Please find my mistakes and advise me.

Thank you in advance for your help.

I'm usually use Sencha Architect 2 and files were generated by SA2.

Models
Code:
Ext.define('MyApp.model.MyModel', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'text'
        }
    ]
});
Stores 1
Code:
Ext.define('MyApp.store.MyJsonTreeStore', {
    extend: 'Ext.data.TreeStore',
    requires: [
        'MyApp.model.MyModel'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            sortOnLoad: false,
            storeId: 'MyJsonTreeStore',
            model: 'MyApp.model.MyModel',
            root: {
                text: 'Root',
                id: 'src',
                expanded: true
            },
            proxy: {
                type: 'ajax',
                url: 'data/foldersA.json',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);
    }
});


Stores 2
Code:
Ext.define('MyApp.store.MyJsonTreeStore1', {
    extend: 'Ext.data.TreeStore',
    requires: [
        'MyApp.model.MyModel'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            sortOnLoad: false,
            storeId: 'MyJsonTreeStore1',
            model: 'MyApp.model.MyModel',
            root: {
                text: 'Root',
                id: 'src',
                expanded: true,
                children: [
                    
                ]
            },
            proxy: {
                type: 'ajax',
                url: 'data/foldersB.json',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);
    }
});

The code above is slightly different from Store1 as below.
root: {
text: 'Root',
id: 'src',
expanded: true,
children: []
}

When I omit "children: [ ]", the app shows error message.

Views
Code:
Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        align: 'stretch',
        type: 'hbox'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'treepanel',
                    id: 'tree',
                    title: 'My Tree Panel',
                    store: 'MyJsonTreeStore',
                    flex: 1,
                    viewConfig: {
                        plugins: [
                            Ext.create('Ext.tree.plugin.TreeViewDragDrop', {
                                ptype: 'treeviewdragdrop',
                                appendOnly: true
                            })
                        ]
                    }
                },
                {
                    xtype: 'treepanel',
                    id: 'tree1',
                    title: 'My Tree Panel1',
                    store: 'MyJsonTreeStore1',
                    flex: 1,
                    viewConfig: {
                        plugins: [
                            Ext.create('Ext.tree.plugin.TreeViewDragDrop', {
                                ptype: 'treeviewdragdrop',
                                appendOnly: true
                            })
                        ]
                    }
                }
            ]
        });

        me.callParent(arguments);
    }

});
data/foldersA.json
Code:
[{
    "id": "f1", "text": "Test", "cls": "folder", "leaf": false, "expanded": true, 
    "children": [
        {"id": "f2", "text": "Movie", "cls": "folder", "leaf": true},
        {"id": "f3", "text": "Karaoke", "cls": "folder", "leaf": true},
        {"id": "f4", "text": "Swimming", "cls": "folder", "leaf": true}
    ]
},
{
    "id": "g1", "text": "Foods", "cls": "folder", "leaf": false, "expanded": true, 
    "children": [
        {"id": "g2", "text": "Apple", "cls": "folder", "leaf": true},
        {"id": "g3", "text": "Peach", "cls": "folder", "leaf": true},
        {"id": "g4", "text": "Rice", "cls": "folder", "leaf": true},
        {"id": "g5","text": "Drinks", "cls": "folder", "leaf": false, "expanded": false, 
        "children": [
            {"id": "g6", "text": "Coffee",     "cls": "folder", "leaf": true},
            {"id": "g7", "text": "Green Tea", "cls": "folder", "leaf": true}
        ]}
    ]
}]
data/foldersB.json
(very simplified.)
Code:
[{
    "id": "f1",
    "text": "Demo",
    "cls": "folder",
    "leaf": false
}]