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>