    Ext.define('Ext.ux.dd.PanelFieldDragZone', {

        extend: 'Ext.dd.DragZone',

        constructor: function(cfg){
            cfg = cfg || {};
            if (cfg.ddGroup) {
                this.ddGroup = cfg.ddGroup;
            }
        },

    //  Call the DRagZone's constructor. The Panel must have been rendered.
        init: function(panel) {
            // Panel is an HtmlElement
            if (panel.nodeType) {
                // Called via dragzone::init
                Ext.ux.dd.PanelFieldDragZone.superclass.init.apply(this, arguments);
            }
            // Panel is a Component - need the el
            else {
                // Called via plugin::init
                if (panel.rendered) {
                    Ext.ux.dd.PanelFieldDragZone.superclass.constructor.call(this, panel.getEl());
                } else {
                    panel.on('afterrender', this.init, this, {single: true});
                }
            }
        },

        scroll: false,

    //  On mousedown, we ascertain whether it is on one of our draggable Fields.
    //  If so, we collect data about the draggable object, and return a drag data
    //  object which contains our own data, plus a "ddel" property which is a DOM
    //  node which provides a "view" of the dragged data.
        getDragData: function(e) {
            var targetLabel = e.getTarget('label', null, true),
                oldMark,
                field,
                dragEl;

            if (targetLabel) {

                // Get the data we are dragging: the Field
                // create a ddel for the drag proxy to display
                field = Ext.getCmp(targetLabel.up('.' + Ext.form.Labelable.prototype.formItemCls).id);
                // Temporary prevent marking the field as invalid, since it causes changes
                // to the underlying dom element which can cause problems in IE
                oldMark = field.preventMark;
                field.preventMark = true;
                if (field.isValid()) {
                    field.preventMark = oldMark;
                    dragEl = document.createElement('div');
                    dragEl.className = 'x-form-text';
                    dragEl.appendChild(document.createTextNode(field.getRawValue()));
                    Ext.fly(dragEl).setWidth(field.getEl().getWidth());
                    return {
                        field: field,
                        ddel: dragEl
                    };
                } else {
                    e.stopEvent();
                }
                field.preventMark = oldMark;
            }
        },

    //  The coordinates to slide the drag proxy back to on failed drop.
        getRepairXY: function() {
            return this.dragData.field.getEl().getXY();
        }
    });