Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / DDProxy.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js">/*
19  * This is a derivative of the similarly named class in the YUI Library.
20  * The original license:
21  * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
22  * Code licensed under the BSD License:
23  * http://developer.yahoo.net/yui/license.txt
24  */
25
26 <span id='Ext-dd-DDProxy-method-constructor'><span id='Ext-dd-DDProxy'>/**
27 </span></span> * @class Ext.dd.DDProxy
28  * A DragDrop implementation that inserts an empty, bordered div into
29  * the document that follows the cursor during drag operations.  At the time of
30  * the click, the frame div is resized to the dimensions of the linked html
31  * element, and moved to the exact location of the linked element.
32  *
33  * References to the &quot;frame&quot; element refer to the single proxy element that
34  * was created to be dragged in place of all DDProxy elements on the
35  * page.
36  *
37  * @extends Ext.dd.DD
38  * @constructor
39  * @param {String} id the id of the linked html element
40  * @param {String} sGroup the group of related DragDrop objects
41  * @param {object} config an object containing configurable attributes
42  *                Valid properties for DDProxy in addition to those in DragDrop:
43  *                   resizeFrame, centerFrame, dragElId
44  */
45 Ext.define('Ext.dd.DDProxy', {
46     extend: 'Ext.dd.DD',
47
48     statics: {
49 <span id='Ext-dd-DDProxy-property-Ext'>        /**
50 </span>         * The default drag frame div id
51          * @property Ext.dd.DDProxy.dragElId
52          * @type String
53          * @static
54          */
55         dragElId: &quot;ygddfdiv&quot;
56     },
57
58     constructor: function(id, sGroup, config) {
59         if (id) {
60             this.init(id, sGroup, config);
61             this.initFrame();
62         }
63     },
64
65 <span id='Ext-dd-DDProxy-property-resizeFrame'>    /**
66 </span>     * By default we resize the drag frame to be the same size as the element
67      * we want to drag (this is to get the frame effect).  We can turn it off
68      * if we want a different behavior.
69      * @property resizeFrame
70      * @type boolean
71      */
72     resizeFrame: true,
73
74 <span id='Ext-dd-DDProxy-property-centerFrame'>    /**
75 </span>     * By default the frame is positioned exactly where the drag element is, so
76      * we use the cursor offset provided by Ext.dd.DD.  Another option that works only if
77      * you do not have constraints on the obj is to have the drag frame centered
78      * around the cursor.  Set centerFrame to true for this effect.
79      * @property centerFrame
80      * @type boolean
81      */
82     centerFrame: false,
83
84 <span id='Ext-dd-DDProxy-method-createFrame'>    /**
85 </span>     * Creates the proxy element if it does not yet exist
86      * @method createFrame
87      */
88     createFrame: function() {
89         var self = this;
90         var body = document.body;
91
92         if (!body || !body.firstChild) {
93             setTimeout( function() { self.createFrame(); }, 50 );
94             return;
95         }
96
97         var div = this.getDragEl();
98
99         if (!div) {
100             div    = document.createElement(&quot;div&quot;);
101             div.id = this.dragElId;
102             var s  = div.style;
103
104             s.position   = &quot;absolute&quot;;
105             s.visibility = &quot;hidden&quot;;
106             s.cursor     = &quot;move&quot;;
107             s.border     = &quot;2px solid #aaa&quot;;
108             s.zIndex     = 999;
109
110             // appendChild can blow up IE if invoked prior to the window load event
111             // while rendering a table.  It is possible there are other scenarios
112             // that would cause this to happen as well.
113             body.insertBefore(div, body.firstChild);
114         }
115     },
116
117 <span id='Ext-dd-DDProxy-method-initFrame'>    /**
118 </span>     * Initialization for the drag frame element.  Must be called in the
119      * constructor of all subclasses
120      * @method initFrame
121      */
122     initFrame: function() {
123         this.createFrame();
124     },
125
126     applyConfig: function() {
127         this.callParent();
128
129         this.resizeFrame = (this.config.resizeFrame !== false);
130         this.centerFrame = (this.config.centerFrame);
131         this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
132     },
133
134 <span id='Ext-dd-DDProxy-method-showFrame'>    /**
135 </span>     * Resizes the drag frame to the dimensions of the clicked object, positions
136      * it over the object, and finally displays it
137      * @method showFrame
138      * @param {int} iPageX X click position
139      * @param {int} iPageY Y click position
140      * @private
141      */
142     showFrame: function(iPageX, iPageY) {
143         var el = this.getEl();
144         var dragEl = this.getDragEl();
145         var s = dragEl.style;
146
147         this._resizeProxy();
148
149         if (this.centerFrame) {
150             this.setDelta( Math.round(parseInt(s.width,  10)/2),
151                            Math.round(parseInt(s.height, 10)/2) );
152         }
153
154         this.setDragElPos(iPageX, iPageY);
155
156         Ext.fly(dragEl).show();
157     },
158
159 <span id='Ext-dd-DDProxy-method-_resizeProxy'>    /**
160 </span>     * The proxy is automatically resized to the dimensions of the linked
161      * element when a drag is initiated, unless resizeFrame is set to false
162      * @method _resizeProxy
163      * @private
164      */
165     _resizeProxy: function() {
166         if (this.resizeFrame) {
167             var el = this.getEl();
168             Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
169         }
170     },
171
172     // overrides Ext.dd.DragDrop
173     b4MouseDown: function(e) {
174         var x = e.getPageX();
175         var y = e.getPageY();
176         this.autoOffset(x, y);
177         this.setDragElPos(x, y);
178     },
179
180     // overrides Ext.dd.DragDrop
181     b4StartDrag: function(x, y) {
182         // show the drag frame
183         this.showFrame(x, y);
184     },
185
186     // overrides Ext.dd.DragDrop
187     b4EndDrag: function(e) {
188         Ext.fly(this.getDragEl()).hide();
189     },
190
191     // overrides Ext.dd.DragDrop
192     // By default we try to move the element to the last location of the frame.
193     // This is so that the default behavior mirrors that of Ext.dd.DD.
194     endDrag: function(e) {
195
196         var lel = this.getEl();
197         var del = this.getDragEl();
198
199         // Show the drag frame briefly so we can get its position
200         del.style.visibility = &quot;&quot;;
201
202         this.beforeMove();
203         // Hide the linked element before the move to get around a Safari
204         // rendering bug.
205         lel.style.visibility = &quot;hidden&quot;;
206         Ext.dd.DDM.moveToEl(lel, del);
207         del.style.visibility = &quot;hidden&quot;;
208         lel.style.visibility = &quot;&quot;;
209
210         this.afterDrag();
211     },
212
213     beforeMove : function(){
214
215     },
216
217     afterDrag : function(){
218
219     },
220
221     toString: function() {
222         return (&quot;DDProxy &quot; + this.id);
223     }
224
225 });
226 </pre>
227 </body>
228 </html>