/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. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.   <title>The source code</title>
    6. 

  6.   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    7. 

  7.   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
    8. 

  8.   <style type="text/css">
    9. 

  9.     .highlight { display: block; background-color: #ddd; }
    10. 

  10.   </style>
    11. 

  11.   <script type="text/javascript">
    12. 

  12.     function highlight() {
    13. 

  13.       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    14. 

  14.     }
    15. 

  15.   </script>
    16. 

  16. </head>
    17. 

  17. <body onload="prettyPrint(); highlight();">
    18. 

  18.   <pre class="prettyprint lang-js">/*
    19. 

  19.  * This is a derivative of the similarly named class in the YUI Library.
    20. 

  20.  * The original license:
    21. 

  21.  * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
    22. 

  22.  * Code licensed under the BSD License:
    23. 

  23.  * http://developer.yahoo.net/yui/license.txt
    24. 

  24.  */
    25. 

  25. 

  26. <span id='Ext-dd-DDProxy'>/**
    27. 

  27. </span> * @class Ext.dd.DDProxy
    28. 

  28.  * @extends Ext.dd.DD
    29. 

  29.  * A DragDrop implementation that inserts an empty, bordered div into
    30. 

  30.  * the document that follows the cursor during drag operations.  At the time of
    31. 

  31.  * the click, the frame div is resized to the dimensions of the linked html
    32. 

  32.  * element, and moved to the exact location of the linked element.
    33. 

  33.  *
    34. 

  34.  * References to the &quot;frame&quot; element refer to the single proxy element that
    35. 

  35.  * was created to be dragged in place of all DDProxy elements on the
    36. 

  36.  * page.
    37. 

  37.  */
    38. 

  38. Ext.define('Ext.dd.DDProxy', {
    39. 

  39.     extend: 'Ext.dd.DD',
    40. 

  40. 

  41.     statics: {
    42. 

  42. <span id='Ext-dd-DDProxy-static-property-dragElId'>        /**
    43. 

  43. </span>         * The default drag frame div id
    44. 

  44.          * @static
    45. 

  45.          */
    46. 

  46.         dragElId: &quot;ygddfdiv&quot;
    47. 

  47.     },
    48. 

  48. 

  49. <span id='Ext-dd-DDProxy-method-constructor'>    /**
    50. 

  50. </span>     * Creates new DDProxy.
    51. 

  51.      * @param {String} id the id of the linked html element
    52. 

  52.      * @param {String} sGroup the group of related DragDrop objects
    53. 

  53.      * @param {Object} config an object containing configurable attributes.
    54. 

  54.      * Valid properties for DDProxy in addition to those in DragDrop:
    55. 

  55.      * 
    56. 

  56.      * - resizeFrame
    57. 

  57.      * - centerFrame
    58. 

  58.      * - dragElId
    59. 

  59.      */
    60. 

  60.     constructor: function(id, sGroup, config) {
    61. 

  61.         if (id) {
    62. 

  62.             this.init(id, sGroup, config);
    63. 

  63.             this.initFrame();
    64. 

  64.         }
    65. 

  65.     },
    66. 

  66. 

  67. <span id='Ext-dd-DDProxy-property-resizeFrame'>    /**
    68. 

  68. </span>     * By default we resize the drag frame to be the same size as the element
    69. 

  69.      * we want to drag (this is to get the frame effect).  We can turn it off
    70. 

  70.      * if we want a different behavior.
    71. 

  71.      * @property resizeFrame
    72. 

  72.      * @type Boolean
    73. 

  73.      */
    74. 

  74.     resizeFrame: true,
    75. 

  75. 

  76. <span id='Ext-dd-DDProxy-property-centerFrame'>    /**
    77. 

  77. </span>     * By default the frame is positioned exactly where the drag element is, so
    78. 

  78.      * we use the cursor offset provided by Ext.dd.DD.  Another option that works only if
    79. 

  79.      * you do not have constraints on the obj is to have the drag frame centered
    80. 

  80.      * around the cursor.  Set centerFrame to true for this effect.
    81. 

  81.      * @property centerFrame
    82. 

  82.      * @type Boolean
    83. 

  83.      */
    84. 

  84.     centerFrame: false,
    85. 

  85. 

  86. <span id='Ext-dd-DDProxy-method-createFrame'>    /**
    87. 

  87. </span>     * Creates the proxy element if it does not yet exist
    88. 

  88.      * @method createFrame
    89. 

  89.      */
    90. 

  90.     createFrame: function() {
    91. 

  91.         var self = this;
    92. 

  92.         var body = document.body;
    93. 

  93. 

  94.         if (!body || !body.firstChild) {
    95. 

  95.             setTimeout( function() { self.createFrame(); }, 50 );
    96. 

  96.             return;
    97. 

  97.         }
    98. 

  98. 

  99.         var div = this.getDragEl();
    100. 

  100. 

  101.         if (!div) {
    102. 

  102.             div    = document.createElement(&quot;div&quot;);
    103. 

  103.             div.id = this.dragElId;
    104. 

  104.             var s  = div.style;
    105. 

  105. 

  106.             s.position   = &quot;absolute&quot;;
    107. 

  107.             s.visibility = &quot;hidden&quot;;
    108. 

  108.             s.cursor     = &quot;move&quot;;
    109. 

  109.             s.border     = &quot;2px solid #aaa&quot;;
    110. 

  110.             s.zIndex     = 999;
    111. 

  111. 

  112.             // appendChild can blow up IE if invoked prior to the window load event
    113. 

  113.             // while rendering a table.  It is possible there are other scenarios
    114. 

  114.             // that would cause this to happen as well.
    115. 

  115.             body.insertBefore(div, body.firstChild);
    116. 

  116.         }
    117. 

  117.     },
    118. 

  118. 

  119. <span id='Ext-dd-DDProxy-method-initFrame'>    /**
    120. 

  120. </span>     * Initialization for the drag frame element.  Must be called in the
    121. 

  121.      * constructor of all subclasses
    122. 

  122.      * @method initFrame
    123. 

  123.      */
    124. 

  124.     initFrame: function() {
    125. 

  125.         this.createFrame();
    126. 

  126.     },
    127. 

  127. 

  128.     applyConfig: function() {
    129. 

  129.         this.callParent();
    130. 

  130. 

  131.         this.resizeFrame = (this.config.resizeFrame !== false);
    132. 

  132.         this.centerFrame = (this.config.centerFrame);
    133. 

  133.         this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
    134. 

  134.     },
    135. 

  135. 

  136. <span id='Ext-dd-DDProxy-method-showFrame'>    /**
    137. 

  137. </span>     * Resizes the drag frame to the dimensions of the clicked object, positions
    138. 

  138.      * it over the object, and finally displays it
    139. 

  139.      * @method showFrame
    140. 

  140.      * @param {Number} iPageX X click position
    141. 

  141.      * @param {Number} iPageY Y click position
    142. 

  142.      * @private
    143. 

  143.      */
    144. 

  144.     showFrame: function(iPageX, iPageY) {
    145. 

  145.         var el = this.getEl();
    146. 

  146.         var dragEl = this.getDragEl();
    147. 

  147.         var s = dragEl.style;
    148. 

  148. 

  149.         this._resizeProxy();
    150. 

  150. 

  151.         if (this.centerFrame) {
    152. 

  152.             this.setDelta( Math.round(parseInt(s.width,  10)/2),
    153. 

  153.                            Math.round(parseInt(s.height, 10)/2) );
    154. 

  154.         }
    155. 

  155. 

  156.         this.setDragElPos(iPageX, iPageY);
    157. 

  157. 

  158.         Ext.fly(dragEl).show();
    159. 

  159.     },
    160. 

  160. 

  161. <span id='Ext-dd-DDProxy-method-_resizeProxy'>    /**
    162. 

  162. </span>     * The proxy is automatically resized to the dimensions of the linked
    163. 

  163.      * element when a drag is initiated, unless resizeFrame is set to false
    164. 

  164.      * @method _resizeProxy
    165. 

  165.      * @private
    166. 

  166.      */
    167. 

  167.     _resizeProxy: function() {
    168. 

  168.         if (this.resizeFrame) {
    169. 

  169.             var el = this.getEl();
    170. 

  170.             Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
    171. 

  171.         }
    172. 

  172.     },
    173. 

  173. 

  174.     // overrides Ext.dd.DragDrop
    175. 

  175.     b4MouseDown: function(e) {
    176. 

  176.         var x = e.getPageX();
    177. 

  177.         var y = e.getPageY();
    178. 

  178.         this.autoOffset(x, y);
    179. 

  179.         this.setDragElPos(x, y);
    180. 

  180.     },
    181. 

  181. 

  182.     // overrides Ext.dd.DragDrop
    183. 

  183.     b4StartDrag: function(x, y) {
    184. 

  184.         // show the drag frame
    185. 

  185.         this.showFrame(x, y);
    186. 

  186.     },
    187. 

  187. 

  188.     // overrides Ext.dd.DragDrop
    189. 

  189.     b4EndDrag: function(e) {
    190. 

  190.         Ext.fly(this.getDragEl()).hide();
    191. 

  191.     },
    192. 

  192. 

  193.     // overrides Ext.dd.DragDrop
    194. 

  194.     // By default we try to move the element to the last location of the frame.
    195. 

  195.     // This is so that the default behavior mirrors that of Ext.dd.DD.
    196. 

  196.     endDrag: function(e) {
    197. 

  197. 

  198.         var lel = this.getEl();
    199. 

  199.         var del = this.getDragEl();
    200. 

  200. 

  201.         // Show the drag frame briefly so we can get its position
    202. 

  202.         del.style.visibility = &quot;&quot;;
    203. 

  203. 

  204.         this.beforeMove();
    205. 

  205.         // Hide the linked element before the move to get around a Safari
    206. 

  206.         // rendering bug.
    207. 

  207.         lel.style.visibility = &quot;hidden&quot;;
    208. 

  208.         Ext.dd.DDM.moveToEl(lel, del);
    209. 

  209.         del.style.visibility = &quot;hidden&quot;;
    210. 

  210.         lel.style.visibility = &quot;&quot;;
    211. 

  211. 

  212.         this.afterDrag();
    213. 

  213.     },
    214. 

  214. 

  215.     beforeMove : function(){
    216. 

  216. 

  217.     },
    218. 

  218. 

  219.     afterDrag : function(){
    220. 

  220. 

  221.     },
    222. 

  222. 

  223.     toString: function() {
    224. 

  224.         return (&quot;DDProxy &quot; + this.id);
    225. 

  225.     }
    226. 

  226. 

  227. });
    228. 

  228. </pre>
    229. 

  229. </body>
    230. 

  230. </html>
    231.