extjs 4 проблема перетаскивания

Question

Я пытаюсь перетащить панель, которая вложена в панель, которая является частью viewPort. Я хочу поместить его на отдельную панель, которая является частью viewPort. Я пытался добавить слушателей, настройки 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()
        })
    }
});