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