docs/source/ComponentDragger.html

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