2 * @class Ext.util.ComponentDragger
3 * @extends Ext.dd.DragTracker
4 * <p>A subclass of Ext.dd.DragTracker which handles dragging any Component.</p>
5 * <p>This is configured with a Component to be made draggable, and a config object for the
6 * {@link Ext.dd.DragTracker} class.</p>
7 * <p>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.</p>
9 * @constructor Create a new ComponentTracker
10 * @param {object} comp The Component to provide dragging for.
11 * @param {object} config The config object
13 Ext.define('Ext.util.ComponentDragger', {
16 * @cfg {Boolean} constrain
17 * Specify as <code>true</code> to constrain the Component to within the bounds of the {@link #constrainTo} region.
21 * @cfg {String/Element} delegate
22 * Optional. <p>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.</p>
24 * <p>This may also be a specific child element within the Component's encapsulating element to use as the drag handle.</p>
28 * @cfg {Boolean} constrainDelegate
29 * Specify as <code>true</code> to constrain the drag handles within the {@link constrainTo} region.
32 extend: 'Ext.dd.DragTracker',
36 constructor: function(comp, config) {
38 this.initialConstrainTo = config.constrainTo;
39 this.callParent([ config ]);
42 onStart: function(e) {
46 // Cache the start [X, Y] array
47 this.startPosition = comp.getPosition();
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 && !comp.liveDrag) {
52 me.proxy = comp.ghost();
53 me.dragTarget = me.proxy.header.el;
56 // Set the constrainTo Region before we start dragging.
57 if (me.constrain || me.constrainDelegate) {
58 me.constrainTo = me.calculateConstrainRegion();
62 calculateConstrainRegion: function() {
65 c = me.initialConstrainTo,
68 shadowSize = comp.el.shadow ? comp.el.shadow.offset : 0;
70 // The configured constrainTo might be a Region or an element
71 if (!(c instanceof Ext.util.Region)) {
72 c = Ext.fly(c).getViewRegion();
75 // Reduce the constrain region to allow for shadow
77 c.adjust(0, -shadowSize, -shadowSize, shadowSize);
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();
88 delegateRegion.top - elRegion.top,
89 delegateRegion.right - elRegion.right,
90 delegateRegion.bottom - elRegion.bottom,
91 delegateRegion.left - elRegion.left
97 // Move either the ghost Component or the target Component to its new position on drag
100 comp = (me.proxy && !me.comp.liveDrag) ? me.proxy : me.comp,
101 offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);
103 comp.setPosition.apply(comp, [me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]]);
107 if (this.proxy && !this.comp.liveDrag) {