Ext.dd.DragZone ddel not what im setting it to

My understand from what i've read is a a DragZone is applied to a container, when you try to drag an item inside the container it allows you to determine if a proper source element is being dragged. It then allows you to create a different element to work as a proxy object. However, I dont seem to be able to get it to work properly. I can get the functionality I want but it involves manually updating the dragzone proxy to include the new ddel and then hiding the proxy.el when its done repairing.

Here is my code for the DragZone. When I try to drag one of the items, I would expect to see the <div>tab.title||tab.card.title</div> Instead I get a box that isnt even big enough for the Invalid or Valid drop icon.

Code:

afterFirstLayout: function() {
    var me = this,
        layout = me.container.getLayout();


    dragZone = me.dragZone = Ext.create('Ext.dd.DragZone', layout.innerCt, {
        ddGroup: 'dockDDGroup',
        getDragData: function(e){
                var sourceEl = e.getTarget(me.itemSelector, 10), d;
                        
                if (sourceEl) {
                        var d = Ext.get(document.createElement('div'));
                        var tab = me.container.getChildByElement(sourceEl);
                        d.update(tab.title || tab.card.title);
                        return  {
                                sourceEl: sourceEl,
                                repairXY: Ext.fly(sourceEl).getXY(),
                                ddel: d
                        }       
                }
        },
        getRepairXY: function() {
                return this.dragData.repairXY;
        },
            startDrag: function() {
                me.showDropZones();
            },
            afterRepair: function() {
                //dragZone.proxy.el.hide(); 
                me.destroyDropZones();
            }


    });
}

Ext.dd.DragZone ddel not what im setting it to