Sencha Ext JS 4，可拖动面板“跳转”启动拖动事件时脱离父级

Question

我有一个 ext js 4 应用程序，由父面板和子面板组成。父面板配置为拖放区，子面板可拖动。当我拖动子面板时，它会跳出屏幕。

这是我用来演示该行为的 YouTube 视频： http://youtu.be/ve6762fXUBo

这是我的源代码：

注意：在 onNodeDrop 我强制面板返回到 50x50 的位置，否则我将无法重复该行为。

Ext.define('CS.view.ViewDashboard', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dashboard',
    layout: 'fit',
    items: [{
        xtype: 'panel',
        id: 'test_panel',
        title: 'test panel',
        html: 'test panel',
        draggable: true,
        constrain: true,
        border: true,
        width: 300,
        height: 300,
        listeners: {
            render: function(el){
                el.center();
            }
        }
    }],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        layout: 'hbox',
        pack: 'center',
        items: [{   
                xtype: 'splitbutton', 
                text: 'Applications',
                handler: function(){
                    console.log('splitbutton');
                },
                menu: new Ext.menu.Menu({
                    items: [
                        {text: 'Item 1', hander: function(){}},
                        {text: 'Item 2', hander: function(){}},
                    ]
                })
        }]
    }],
    listeners: {
        render: function(sender){

            console.log(sender);

            sender.dropZone = new Ext.dd.DropZone(sender.body, {

                getTargetFromEvent: function(e) {

                    console.log('getTargetFromEvent');

                    var temp = { 
                        x: e.getX() - this.DDMInstance.deltaX, 
                        y: e.getY() - this.DDMInstance.deltaY
                    };

                    console.log(temp);
                    return temp;

                },

                // On entry into a target node, highlight that node.
                onNodeEnter : function(target, dd, e, data){ 
                //    Ext.fly(target).addCls('my-row-highlight-class');
                },

                // On exit from a target node, unhighlight that node.
                onNodeOut : function(target, dd, e, data){ 
                //    Ext.fly(target).removeCls('my-row-highlight-class');
                },

                onNodeOver : function(target, dd, e, data){ 
                    return Ext.dd.DropZone.prototype.dropAllowed;
                },

                onNodeDrop : function(target, dd, e, data){

                    console.log('onNodeDrop');
                    data.panel.setPosition(50, 50, true);
                    return true;

                }
            });



        }
    }
});