PageRenderTime 32ms CodeModel.GetById 23ms app.highlight 7ms RepoModel.GetById 0ms app.codeStats 0ms

/ext-4.0.7/docs/source/DDProxy.html

https://bitbucket.org/srogerf/javascript
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 &quot;frame&quot; 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: &quot;ygddfdiv&quot;
 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(&quot;div&quot;);
103            div.id = this.dragElId;
104            var s  = div.style;
105
106            s.position   = &quot;absolute&quot;;
107            s.visibility = &quot;hidden&quot;;
108            s.cursor     = &quot;move&quot;;
109            s.border     = &quot;2px solid #aaa&quot;;
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 = &quot;&quot;;
203
204        this.beforeMove();
205        // Hide the linked element before the move to get around a Safari
206        // rendering bug.
207        lel.style.visibility = &quot;hidden&quot;;
208        Ext.dd.DDM.moveToEl(lel, del);
209        del.style.visibility = &quot;hidden&quot;;
210        lel.style.visibility = &quot;&quot;;
211
212        this.afterDrag();
213    },
214
215    beforeMove : function(){
216
217    },
218
219    afterDrag : function(){
220
221    },
222
223    toString: function() {
224        return (&quot;DDProxy &quot; + this.id);
225    }
226
227});
228</pre>
229</body>
230</html>