src/widgets/grid/ColumnDD.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 // private
   8 // This is a support class used internally by the Grid components
   9 Ext.grid.HeaderDragZone = Ext.extend(Ext.dd.DragZone, {
  10     maxDragWidth: 120,
  11
  12     constructor : function(grid, hd, hd2){
  13         this.grid = grid;
  14         this.view = grid.getView();
  15         this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
  16         Ext.grid.HeaderDragZone.superclass.constructor.call(this, hd);
  17         if(hd2){
  18             this.setHandleElId(Ext.id(hd));
  19             this.setOuterHandleElId(Ext.id(hd2));
  20         }
  21         this.scroll = false;
  22     },
  23
  24     getDragData : function(e){
  25         var t = Ext.lib.Event.getTarget(e),
  26             h = this.view.findHeaderCell(t);
  27         if(h){
  28             return {ddel: h.firstChild, header:h};
  29         }
  30         return false;
  31     },
  32
  33     onInitDrag : function(e){
  34         // keep the value here so we can restore it;
  35         this.dragHeadersDisabled = this.view.headersDisabled;
  36         this.view.headersDisabled = true;
  37         var clone = this.dragData.ddel.cloneNode(true);
  38         clone.id = Ext.id();
  39         clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
  40         this.proxy.update(clone);
  41         return true;
  42     },
  43
  44     afterValidDrop : function(){
  45         this.completeDrop();
  46     },
  47
  48     afterInvalidDrop : function(){
  49         this.completeDrop();
  50     },
  51
  52     completeDrop: function(){
  53         var v = this.view,
  54             disabled = this.dragHeadersDisabled;
  55         setTimeout(function(){
  56             v.headersDisabled = disabled;
  57         }, 50);
  58     }
  59 });
  60
  61 // private
  62 // This is a support class used internally by the Grid components
  63 Ext.grid.HeaderDropZone = Ext.extend(Ext.dd.DropZone, {
  64     proxyOffsets : [-4, -9],
  65     fly: Ext.Element.fly,
  66
  67     constructor : function(grid, hd, hd2){
  68         this.grid = grid;
  69         this.view = grid.getView();
  70         // split the proxies so they don't interfere with mouse events
  71         this.proxyTop = Ext.DomHelper.append(document.body, {
  72             cls:"col-move-top", html:"&#160;"
  73         }, true);
  74         this.proxyBottom = Ext.DomHelper.append(document.body, {
  75             cls:"col-move-bottom", html:"&#160;"
  76         }, true);
  77         this.proxyTop.hide = this.proxyBottom.hide = function(){
  78             this.setLeftTop(-100,-100);
  79             this.setStyle("visibility", "hidden");
  80         };
  81         this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
  82         // temporarily disabled
  83         //Ext.dd.ScrollManager.register(this.view.scroller.dom);
  84         Ext.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
  85     },
  86
  87     getTargetFromEvent : function(e){
  88         var t = Ext.lib.Event.getTarget(e),
  89             cindex = this.view.findCellIndex(t);
  90         if(cindex !== false){
  91             return this.view.getHeaderCell(cindex);
  92         }
  93     },
  94
  95     nextVisible : function(h){
  96         var v = this.view, cm = this.grid.colModel;
  97         h = h.nextSibling;
  98         while(h){
  99             if(!cm.isHidden(v.getCellIndex(h))){
 100                 return h;
 101             }
 102             h = h.nextSibling;
 103         }
 104         return null;
 105     },
 106
 107     prevVisible : function(h){
 108         var v = this.view, cm = this.grid.colModel;
 109         h = h.prevSibling;
 110         while(h){
 111             if(!cm.isHidden(v.getCellIndex(h))){
 112                 return h;
 113             }
 114             h = h.prevSibling;
 115         }
 116         return null;
 117     },
 118
 119     positionIndicator : function(h, n, e){
 120         var x = Ext.lib.Event.getPageX(e),
 121             r = Ext.lib.Dom.getRegion(n.firstChild),
 122             px,
 123             pt,
 124             py = r.top + this.proxyOffsets[1];
 125         if((r.right - x) <= (r.right-r.left)/2){
 126             px = r.right+this.view.borderWidth;
 127             pt = "after";
 128         }else{
 129             px = r.left;
 130             pt = "before";
 131         }
 132
 133         if(this.grid.colModel.isFixed(this.view.getCellIndex(n))){
 134             return false;
 135         }
 136
 137         px +=  this.proxyOffsets[0];
 138         this.proxyTop.setLeftTop(px, py);
 139         this.proxyTop.show();
 140         if(!this.bottomOffset){
 141             this.bottomOffset = this.view.mainHd.getHeight();
 142         }
 143         this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
 144         this.proxyBottom.show();
 145         return pt;
 146     },
 147
 148     onNodeEnter : function(n, dd, e, data){
 149         if(data.header != n){
 150             this.positionIndicator(data.header, n, e);
 151         }
 152     },
 153
 154     onNodeOver : function(n, dd, e, data){
 155         var result = false;
 156         if(data.header != n){
 157             result = this.positionIndicator(data.header, n, e);
 158         }
 159         if(!result){
 160             this.proxyTop.hide();
 161             this.proxyBottom.hide();
 162         }
 163         return result ? this.dropAllowed : this.dropNotAllowed;
 164     },
 165
 166     onNodeOut : function(n, dd, e, data){
 167         this.proxyTop.hide();
 168         this.proxyBottom.hide();
 169     },
 170
 171     onNodeDrop : function(n, dd, e, data){
 172         var h = data.header;
 173         if(h != n){
 174             var cm = this.grid.colModel,
 175                 x = Ext.lib.Event.getPageX(e),
 176                 r = Ext.lib.Dom.getRegion(n.firstChild),
 177                 pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before",
 178                 oldIndex = this.view.getCellIndex(h),
 179                 newIndex = this.view.getCellIndex(n);
 180             if(pt == "after"){
 181                 newIndex++;
 182             }
 183             if(oldIndex < newIndex){
 184                 newIndex--;
 185             }
 186             cm.moveColumn(oldIndex, newIndex);
 187             return true;
 188         }
 189         return false;
 190     }
 191 });
 192
 193 Ext.grid.GridView.ColumnDragZone = Ext.extend(Ext.grid.HeaderDragZone, {
 194
 195     constructor : function(grid, hd){
 196         Ext.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
 197         this.proxy.el.addClass('x-grid3-col-dd');
 198     },
 199
 200     handleMouseDown : function(e){
 201     },
 202
 203     callHandleMouseDown : function(e){
 204         Ext.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
 205     }
 206 });