extjs 4拖放问题

Question

我试图拖动嵌套在作为视口一部分的面板中的面板。我想将它放在一个单独的面板上，该面板是视口的一部分。我尝试过添加侦听器、设置 dropallowed 以及其他一些在线示例，但似乎对我不起作用。这是我的代码。我希望能够抓住任何一个“图标”面板并将它们拖动到“我的工作区”面板。我不需要渲染拖动到拖放区的项目。我只想在事件发生时触发一个函数。

var MySites = new Ext.application({
    name: 'MySites Application',
    launch: function () {
        Ext.create('Ext.Viewport', {
            title: 'My Center',
            layout: 'border',
            items: [{
                xtype: 'panel',
                region: 'west',
                collapsible: true,
                collapsed: true,
                title: 'Applications',
                width: 250,
                layout: 'accordion',
                margins: '5 0 0 5',
                defaults: {
                    bodyStyle: 'padding:15px'
                },
                layoutConfig: {
                    // layout-specific configs go here
                    titleCollapse: false,
                    animate: true,
                    activeOnTop: true
                },
                items: [{
                    title: 'Apps',
                    layout: 'auto',
                    items: [{
                        xtype: 'panel',
                        title: 'Icon 1',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }, {
                        xtype: 'panel',
                        title: 'Icon 2',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }, {
                        xtype: 'panel',
                        title: 'Icon 3',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }]
                }, {
                    title: 'Favorites',
                    layout: 'auto',
                    items: [{
                        xtype: 'panel',
                        title: 'Icon 1',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }, {
                        xtype: 'panel',
                        title: 'Icon 2',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }, {
                        xtype: 'panel',
                        title: 'Icon 3',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }]
                }, {
                    title: 'Reporting',
                    layout: 'auto',
                    items: [{
                        xtype: 'panel',
                        title: 'Icon 1',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }, {
                        xtype: 'panel',
                        title: 'Icon 2',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }, {
                        xtype: 'panel',
                        title: 'Icon 3',
                        height: 75,
                        width: 75,
                        padding: '5 5 5 5',
                        draggable: true
                    }]
                }]
            }, {
                title: 'My Workspace',
                region: 'center',
                xtype: 'panel',
                layout: 'fit',
                margins: '5 5 0 0'
            }, {
                title: 'Tasks',
                region: 'south',
                height: 300,
                split: true,
                xtype: 'panel',
                collapsible: true,
                collapsed: true,
                margins: '0 5 5 5',
                html: 'Item 1<br />Item 2<br />Item 3'
            }],
            renderTo: Ext.getBody()
        })
    }
});