source/widgets/grid/ColumnDD.js

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