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; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-util-ComponentDragger-method-constructor'><span id='Ext-util-ComponentDragger'>/**
19 </span></span> * @class Ext.util.ComponentDragger
20 * @extends Ext.dd.DragTracker
21 * <p>A subclass of Ext.dd.DragTracker which handles dragging any Component.</p>
22 * <p>This is configured with a Component to be made draggable, and a config object for the
23 * {@link Ext.dd.DragTracker} class.</p>
24 * <p>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.</p>
26 * @constructor Create a new ComponentTracker
27 * @param {object} comp The Component to provide dragging for.
28 * @param {object} config The config object
30 Ext.define('Ext.util.ComponentDragger', {
32 <span id='Ext-util-ComponentDragger-cfg-constrain'> /**
33 </span> * @cfg {Boolean} constrain
34 * Specify as <code>true</code> to constrain the Component to within the bounds of the {@link #constrainTo} region.
37 <span id='Ext-util-ComponentDragger-cfg-delegate'> /**
38 </span> * @cfg {String/Element} delegate
39 * Optional. <p>A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the Component's encapsulating
40 * Element which are the drag handles. This limits dragging to only begin when the matching elements are mousedowned.</p>
41 * <p>This may also be a specific child element within the Component's encapsulating element to use as the drag handle.</p>
44 <span id='Ext-util-ComponentDragger-cfg-constrainDelegate'> /**
45 </span> * @cfg {Boolean} constrainDelegate
46 * Specify as <code>true</code> to constrain the drag handles within the {@link constrainTo} region.
49 extend: 'Ext.dd.DragTracker',
53 constructor: function(comp, config) {
55 this.initialConstrainTo = config.constrainTo;
56 this.callParent([ config ]);
59 onStart: function(e) {
63 // Cache the start [X, Y] array
64 this.startPosition = comp.getPosition();
66 // If client Component has a ghost method to show a lightweight version of itself
67 // then use that as a drag proxy unless configured to liveDrag.
68 if (comp.ghost && !comp.liveDrag) {
69 me.proxy = comp.ghost();
70 me.dragTarget = me.proxy.header.el;
73 // Set the constrainTo Region before we start dragging.
74 if (me.constrain || me.constrainDelegate) {
75 me.constrainTo = me.calculateConstrainRegion();
79 calculateConstrainRegion: function() {
82 c = me.initialConstrainTo,
85 shadowSize = comp.el.shadow ? comp.el.shadow.offset : 0;
87 // The configured constrainTo might be a Region or an element
88 if (!(c instanceof Ext.util.Region)) {
89 c = Ext.fly(c).getViewRegion();
92 // Reduce the constrain region to allow for shadow
94 c.adjust(0, -shadowSize, -shadowSize, shadowSize);
97 // If they only want to constrain the *delegate* to within the constrain region,
98 // adjust the region to be larger based on the insets of the delegate from the outer
99 // edges of the Component.
100 if (!me.constrainDelegate) {
101 delegateRegion = Ext.fly(me.dragTarget).getRegion();
102 elRegion = me.proxy ? me.proxy.el.getRegion() : comp.el.getRegion();
105 delegateRegion.top - elRegion.top,
106 delegateRegion.right - elRegion.right,
107 delegateRegion.bottom - elRegion.bottom,
108 delegateRegion.left - elRegion.left
114 // Move either the ghost Component or the target Component to its new position on drag
115 onDrag: function(e) {
117 comp = (me.proxy && !me.comp.liveDrag) ? me.proxy : me.comp,
118 offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);
120 comp.setPosition(me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]);
124 if (this.proxy && !this.comp.liveDrag) {