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