/**
 * @private
 */
Ext.define('Ext.grid.plugin.grouping.DragZone', {
    extend: 'Ext.drag.Source',
 
    requires: [
        'Ext.drag.proxy.Placeholder'
    ],
 
    groups: 'gridgrouping',
 
    proxy: {
        type: 'placeholder',
        cursorOffset: [-20, 30],
        placeholderCls: Ext.baseCSSPrefix + 'grid-drag-proxy-placeholder',
        validCls: Ext.baseCSSPrefix + 'grid-drag-proxy-placeholder-valid',
        invalidCls: Ext.baseCSSPrefix + 'grid-drag-proxy-placeholder-invalid'
    },
 
    handle: '.' + Ext.baseCSSPrefix + 'grid-group-column',
    placeholderIconCls: Ext.baseCSSPrefix + 'grid-drag-placeholder-icon',
 
    platformConfig: {
        phone: {
            activateOnLongPress: true
        }
    },
 
    internalColConfig: 'isGroupingPanelColumn',
 
    constructor: function(panel) {
        this.panel = panel;
 
        this.callParent([{
            element: panel.element
        }]);
    },
 
    beforeDragStart: function(info) {
        var me = this,
            target = Ext.fly(info.eventTarget),
            column;
 
        target = target && target.component;
 
        if (target && target[me.internalColConfig]) {
            column = target;
        }
        else {
            target = Ext.fly(info.eventTarget).up(me.getHandle());
            column = target && target.component;
        }
 
        if (!column) {
            return false;
        }
 
        info.setData('column', column);
        info.setData('sourcePanel', me.panel);
    },
 
    onDragStart: function(info) {
        var me = this,
            html = '<span class="' + me.placeholderIconCls + '">&nbsp;</span><span>{0}</span>',
            column = info.data.column;
 
        me.getProxy().setHtml(Ext.String.format(html, column.getText()));
    }
});