# ColumnDD.js

    // private
    // This is a support class used internally by the Grid components
    Ext.grid.HeaderDragZone = function(grid, hd, hd2){
        this.grid = grid;
        this.view = grid.getView();
        this.ddGroup = "gridHeader" + this.grid.container.id;
        Ext.grid.HeaderDragZone.superclass.constructor.call(this, hd);
        if(hd2){
            this.setHandleElId(Ext.id(hd));
            this.setOuterHandleElId(Ext.id(hd2));
        }
        this.scroll = false;
    };
    Ext.extend(Ext.grid.HeaderDragZone, Ext.dd.DragZone, {
        maxDragWidth: 120,
        getDragData : function(e){
            var t = Ext.lib.Event.getTarget(e);
            var h = this.view.findHeaderCell(t);
            if(h){
                return {ddel: h.firstChild, header:h};
            }
            return false;
        },

        onInitDrag : function(e){
            this.view.headersDisabled = true;
            var clone = this.dragData.ddel.cloneNode(true);
            clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
            this.proxy.update(clone);
            return true;
        },

        afterValidDrop : function(){
            var v = this.view;
            setTimeout(function(){
                v.headersDisabled = false;
            }, 50);
        },

        afterInvalidDrop : function(){
            var v = this.view;
            setTimeout(function(){
                v.headersDisabled = false;
            }, 50);
        }
    });

    // private
    // This is a support class used internally by the Grid components
    Ext.grid.HeaderDropZone = function(grid, hd, hd2){
        this.grid = grid;
        this.view = grid.getView();
        // split the proxies so they don't interfere with mouse events
        this.proxyTop = Ext.DomHelper.append(document.body, {
            tag:"div", cls:"col-move-top", html:"&#160;"
        }, true);
        this.proxyBottom = Ext.DomHelper.append(document.body, {
            tag:"div", cls:"col-move-bottom", html:"&#160;"
        }, true);
        this.proxyTop.hide = this.proxyBottom.hide = function(){
            this.setLeftTop(-100,-100);
            this.setStyle("visibility", "hidden");
        };
        this.ddGroup = "gridHeader" + this.grid.container.id;
        // temporarily disabled
        //Ext.dd.ScrollManager.register(this.view.scroller.dom);
        Ext.grid.HeaderDropZone.superclass.constructor.call(this, grid.container.dom);
    };
    Ext.extend(Ext.grid.HeaderDropZone, Ext.dd.DropZone, {
        proxyOffsets : [-4, -9],
        fly: Ext.Element.fly,

        getTargetFromEvent : function(e){
            var t = Ext.lib.Event.getTarget(e);
            var cindex = this.view.findCellIndex(t);
            if(cindex !== false){
                return this.view.getHeaderCell(cindex);
            }
        },

        nextVisible : function(h){
            var v = this.view, cm = this.grid.colModel;
            h = h.nextSibling;
            while(h){
                if(!cm.isHidden(v.getCellIndex(h))){
                    return h;
                }
                h = h.nextSibling;
            }
            return null;
        },

        prevVisible : function(h){
            var v = this.view, cm = this.grid.colModel;
            h = h.prevSibling;
            while(h){
                if(!cm.isHidden(v.getCellIndex(h))){
                    return h;
                }
                h = h.prevSibling;
            }
            return null;
        },

        positionIndicator : function(h, n, e){
            var x = Ext.lib.Event.getPageX(e);
            var r = Ext.lib.Dom.getRegion(n.firstChild);
            var px, pt, py = r.top + this.proxyOffsets[1];
            if((r.right - x) <= (r.right-r.left)/2){
                px = r.right+this.view.borderWidth;
                pt = "after";
            }else{
                px = r.left;
                pt = "before";
            }
            var oldIndex = this.view.getCellIndex(h);
            var newIndex = this.view.getCellIndex(n);
            var locked = this.grid.colModel.isLocked(newIndex);
            if(pt == "after"){
                newIndex++;
            }
            if(oldIndex < newIndex){
                newIndex--;
            }
            if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
                return false;
            }
            px +=  this.proxyOffsets[0];
            this.proxyTop.setLeftTop(px, py);
            this.proxyTop.show();
            if(!this.bottomOffset){
                this.bottomOffset = this.view.mainHd.getHeight();
            }
            this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
            this.proxyBottom.show();
            return pt;
        },

        onNodeEnter : function(n, dd, e, data){
            if(data.header != n){
                this.positionIndicator(data.header, n, e);
            }
        },

        onNodeOver : function(n, dd, e, data){
            var result = false;
            if(data.header != n){
                result = this.positionIndicator(data.header, n, e);
            }
            if(!result){
                this.proxyTop.hide();
                this.proxyBottom.hide();
            }
            return result ? this.dropAllowed : this.dropNotAllowed;
        },

        onNodeOut : function(n, dd, e, data){
            this.proxyTop.hide();
            this.proxyBottom.hide();
        },

        onNodeDrop : function(n, dd, e, data){
            var h = data.header;
            if(h != n){
                var cm = this.grid.colModel;
                var x = Ext.lib.Event.getPageX(e);
                var r = Ext.lib.Dom.getRegion(n.firstChild);
                var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
                var oldIndex = this.view.getCellIndex(h);
                var newIndex = this.view.getCellIndex(n);
                var locked = cm.isLocked(newIndex);
                if(pt == "after"){
                    newIndex++;
                }
                if(oldIndex < newIndex){
                    newIndex--;
                }
                if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
                    return false;
                }
                cm.setLocked(oldIndex, locked, true);
                cm.moveColumn(oldIndex, newIndex);
                this.grid.fireEvent("columnmove", oldIndex, newIndex);
                return true;
            }
            return false;
        }
    });

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.