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'>/**
  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  */
  38 Ext.define('Ext.dd.DDProxy', {
  39     extend: 'Ext.dd.DD',
  40
  41     statics: {
  42 <span id='Ext-dd-DDProxy-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 {int} iPageX X click position
 141      * @param {int} 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>