Cant get Ext.dd.DropTarget notifyEnter to fire

I am trying to understand the drag and drop, I have read the overview doc a few times. It helped but just when I think i'm making progress I get stuck.

Currently I got my drag working by using Ext.dd.DD. Ive been reverse engineering the tab reorder. I am trying to build a dock manager.

Code:

dd = me.dd = Ext.create('Ext.dd.DD', layout.innerCt, 'dockableDDGroup');
Ext.apply(dd, {
    dock: me,
    container: me.container,
    getDragCmp: this.getDragCmp,
    onMouseDown: me.onMouseDown,
    onMouseUp: me.onMouseUp,
    startDrag: me.startDrag,
    onDrag: me.onDrag,
    endDrag: me.endDrag


});

This allows me to start the drag off the headers of the tab panel. Once I do that I create a different element to act as my drag el.

Code:

                getDragCmp: function(e) {
                    var tab = this.container.getChildByElement(e.getTarget(this.itemSelector, 10));
                    var x, y;
                    x = e.getXY()[0];
                    y = e.getXY()[1];
                    return Ext.create('Ext.panel.Panel', {
                        title: tab.title || tab.card.title,
                        titleAlign: 'center',
                        width: 50,
                        height: 50,
                        renderTo: Ext.getBody(),
                        hidden: true,
                        floating: {shadow: false},
                        x: x,
                        y: y,
                        items: [{
                            xtype: 'label',
                            style: 'text-align:center',
                            text: '......',
                            margin: '0 10 0 10'
                        }]
                    });
                },

The drag works as expected, It is hidden by default because I dont want to show it until I start drag, if the drag is never started I destroy it.

So this is working as expected. However I then try to create a drop target using the follow.

Code:

                                Ext.create('Ext.panel.Panel', {
                        floating: true,
                        x: x,
                        y: y,
                        height: 50,
                        width: 50,
                        renderTo: Ext.getBody(),
                        afterFirstLayout: function() {
                            var me = this;
                            me.dropTarget = new Ext.dd.DropTarget(me.body, {
                                ddGroup: 'dockableDDGroup',
                                notifyEnter: function(ddSource, e, data){
                                    alert('blah');
                                    body.stopAnimation();
                                    body.highlight();
                                }


                            })


                        }
                    })

That alert never fires. Anything obvious that I am doing wrong?



Cant get Ext.dd.DropTarget notifyEnter to fire