Ext.define('Ext.ux.dd.PanelFieldDragZone', {
    extend: 'Ext.dd.DragZone',
    alias: 'plugin.ux-panelfielddragzone',
 
    scroll: false,
 
    constructor: function (cfg) {
        if (cfg) {
            if (cfg.ddGroup) {
                this.ddGroup = cfg.ddGroup;
            }
        }
    },
 
    init: function (panel) {
        var el;
 
        // Call the DragZone's constructor. The Panel must have been rendered. 
        // 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) {
                el = panel.getEl();
                el.unselectable();
                Ext.ux.dd.PanelFieldDragZone.superclass.constructor.call(this, el);
            } else {
                panel.on('afterrender', this.init, this, {single: true});
            }
        }
    },
 
    getDragData: function (e) {
        // 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. 
        var targetLabel = e.getTarget('label', null, true),
            text, 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 = Ext.baseCSSPrefix + 'form-text';
                text = field.getRawValue();
                dragEl.innerHTML = Ext.isEmpty(text) ? ' ' : text;
 
                Ext.fly(dragEl).setWidth(field.getEl().getWidth());
 
                return {
                    field: field,
                    ddel: dragEl
                };
            }
 
            e.stopEvent();
            field.preventMark = oldMark;
        }
    },
 
    getRepairXY: function() {
        // The coordinates to slide the drag proxy back to on failed drop. 
        return this.dragData.field.getEl().getXY();
    }
});