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