docs/source/ComponentDragger.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="../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"><span id='Ext-util-ComponentDragger'>/**
  19 </span> * @class Ext.util.ComponentDragger
  20  * @extends Ext.dd.DragTracker
  21  * &lt;p&gt;A subclass of Ext.dd.DragTracker which handles dragging any Component.&lt;/p&gt;
  22  * &lt;p&gt;This is configured with a Component to be made draggable, and a config object for the
  23  * {@link Ext.dd.DragTracker} class.&lt;/p&gt;
  24  * &lt;p&gt;A {@link #delegate} may be provided which may be either the element to use as the mousedown target
  25  * or a {@link Ext.DomQuery} selector to activate multiple mousedown targets.&lt;/p&gt;
  26  */
  27 Ext.define('Ext.util.ComponentDragger', {
  28
  29 <span id='Ext-util-ComponentDragger-cfg-constrain'>    /**
  30 </span>     * @cfg {Boolean} constrain
  31      * Specify as &lt;code&gt;true&lt;/code&gt; to constrain the Component to within the bounds of the {@link #constrainTo} region.
  32      */
  33
  34 <span id='Ext-util-ComponentDragger-cfg-delegate'>    /**
  35 </span>     * @cfg {String/Ext.Element} delegate
  36      * Optional. &lt;p&gt;A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the Component's encapsulating
  37      * Element which are the drag handles. This limits dragging to only begin when the matching elements are mousedowned.&lt;/p&gt;
  38      * &lt;p&gt;This may also be a specific child element within the Component's encapsulating element to use as the drag handle.&lt;/p&gt;
  39      */
  40
  41 <span id='Ext-util-ComponentDragger-cfg-constrainDelegate'>    /**
  42 </span>     * @cfg {Boolean} constrainDelegate
  43      * Specify as &lt;code&gt;true&lt;/code&gt; to constrain the drag handles within the {@link #constrainTo} region.
  44      */
  45
  46     extend: 'Ext.dd.DragTracker',
  47
  48     autoStart: 500,
  49
  50 <span id='Ext-util-ComponentDragger-method-constructor'>    /**
  51 </span>     * Creates new ComponentDragger.
  52      * @param {Object} comp The Component to provide dragging for.
  53      * @param {Object} config (optional) Config object
  54      */
  55     constructor: function(comp, config) {
  56         this.comp = comp;
  57         this.initialConstrainTo = config.constrainTo;
  58         this.callParent([ config ]);
  59     },
  60
  61     onStart: function(e) {
  62         var me = this,
  63             comp = me.comp;
  64
  65         // Cache the start [X, Y] array
  66         this.startPosition = comp.getPosition();
  67
  68         // If client Component has a ghost method to show a lightweight version of itself
  69         // then use that as a drag proxy unless configured to liveDrag.
  70         if (comp.ghost &amp;&amp; !comp.liveDrag) {
  71              me.proxy = comp.ghost();
  72              me.dragTarget = me.proxy.header.el;
  73         }
  74
  75         // Set the constrainTo Region before we start dragging.
  76         if (me.constrain || me.constrainDelegate) {
  77             me.constrainTo = me.calculateConstrainRegion();
  78         }
  79     },
  80
  81     calculateConstrainRegion: function() {
  82         var me = this,
  83             comp = me.comp,
  84             c = me.initialConstrainTo,
  85             delegateRegion,
  86             elRegion,
  87             shadowSize = comp.el.shadow ? comp.el.shadow.offset : 0;
  88
  89         // The configured constrainTo might be a Region or an element
  90         if (!(c instanceof Ext.util.Region)) {
  91             c =  Ext.fly(c).getViewRegion();
  92         }
  93
  94         // Reduce the constrain region to allow for shadow
  95         if (shadowSize) {
  96             c.adjust(0, -shadowSize, -shadowSize, shadowSize);
  97         }
  98
  99         // If they only want to constrain the *delegate* to within the constrain region,
 100         // adjust the region to be larger based on the insets of the delegate from the outer
 101         // edges of the Component.
 102         if (!me.constrainDelegate) {
 103             delegateRegion = Ext.fly(me.dragTarget).getRegion();
 104             elRegion = me.proxy ? me.proxy.el.getRegion() : comp.el.getRegion();
 105
 106             c.adjust(
 107                 delegateRegion.top - elRegion.top,
 108                 delegateRegion.right - elRegion.right,
 109                 delegateRegion.bottom - elRegion.bottom,
 110                 delegateRegion.left - elRegion.left
 111             );
 112         }
 113         return c;
 114     },
 115
 116     // Move either the ghost Component or the target Component to its new position on drag
 117     onDrag: function(e) {
 118         var me = this,
 119             comp = (me.proxy &amp;&amp; !me.comp.liveDrag) ? me.proxy : me.comp,
 120             offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);
 121
 122         comp.setPosition(me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]);
 123     },
 124
 125     onEnd: function(e) {
 126         if (this.proxy &amp;&amp; !this.comp.liveDrag) {
 127             this.comp.unghost();
 128         }
 129     }
 130 });</pre>
 131 </body>
 132 </html>