ComponentDragger.html
5.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-util-ComponentDragger'>/**
</span> * A subclass of Ext.dd.DragTracker which handles dragging any Component.
*
* This is configured with a Component to be made draggable, and a config object for the {@link Ext.dd.DragTracker}
* class.
*
* A {@link #delegate} may be provided which may be either the element to use as the mousedown target or a {@link
* Ext.DomQuery} selector to activate multiple mousedown targets.
*
* When the Component begins to be dragged, its `beginDrag` method will be called if implemented.
*
* When the drag ends, its `endDrag` method will be called if implemented.
*/
Ext.define('Ext.util.ComponentDragger', {
extend: 'Ext.dd.DragTracker',
<span id='Ext-util-ComponentDragger-cfg-constrain'> /**
</span> * @cfg {Boolean} constrain
* Specify as `true` to constrain the Component to within the bounds of the {@link #constrainTo} region.
*/
<span id='Ext-util-ComponentDragger-cfg-delegate'> /**
</span> * @cfg {String/Ext.Element} delegate
* A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the Component's encapsulating
* Element which are the drag handles. This limits dragging to only begin when the matching elements are
* mousedowned.
*
* This may also be a specific child element within the Component's encapsulating element to use as the drag handle.
*/
<span id='Ext-util-ComponentDragger-cfg-constrainDelegate'> /**
</span> * @cfg {Boolean} constrainDelegate
* Specify as `true` to constrain the drag handles within the {@link #constrainTo} region.
*/
autoStart: 500,
<span id='Ext-util-ComponentDragger-method-constructor'> /**
</span> * Creates new ComponentDragger.
* @param {Object} comp The Component to provide dragging for.
* @param {Object} [config] Config object
*/
constructor: function(comp, config) {
this.comp = comp;
this.initialConstrainTo = config.constrainTo;
this.callParent([ config ]);
},
onStart: function(e) {
var me = this,
comp = me.comp;
// Cache the start [X, Y] array
this.startPosition = comp.el.getXY();
// If client Component has a ghost method to show a lightweight version of itself
// then use that as a drag proxy unless configured to liveDrag.
if (comp.ghost && !comp.liveDrag) {
me.proxy = comp.ghost();
me.dragTarget = me.proxy.header.el;
}
// Set the constrainTo Region before we start dragging.
if (me.constrain || me.constrainDelegate) {
me.constrainTo = me.calculateConstrainRegion();
}
if (comp.beginDrag) {
comp.beginDrag();
}
},
calculateConstrainRegion: function() {
var me = this,
comp = me.comp,
c = me.initialConstrainTo,
delegateRegion,
elRegion,
dragEl = me.proxy ? me.proxy.el : comp.el,
shadowSize = (!me.constrainDelegate && dragEl.shadow && !dragEl.shadowDisabled) ? dragEl.shadow.getShadowSize() : 0;
// The configured constrainTo might be a Region or an element
if (!(c instanceof Ext.util.Region)) {
c = Ext.fly(c).getViewRegion();
}
// Reduce the constrain region to allow for shadow
if (shadowSize) {
c.adjust(shadowSize[0], -shadowSize[1], -shadowSize[2], shadowSize[3]);
}
// If they only want to constrain the *delegate* to within the constrain region,
// adjust the region to be larger based on the insets of the delegate from the outer
// edges of the Component.
if (!me.constrainDelegate) {
delegateRegion = Ext.fly(me.dragTarget).getRegion();
elRegion = dragEl.getRegion();
c.adjust(
delegateRegion.top - elRegion.top,
delegateRegion.right - elRegion.right,
delegateRegion.bottom - elRegion.bottom,
delegateRegion.left - elRegion.left
);
}
return c;
},
// Move either the ghost Component or the target Component to its new position on drag
onDrag: function(e) {
var me = this,
comp = (me.proxy && !me.comp.liveDrag) ? me.proxy : me.comp,
offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);
comp.setPagePosition(me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]);
},
onEnd: function(e) {
var comp = this.comp;
if (this.proxy && !comp.liveDrag) {
comp.unghost();
}
if (comp.endDrag) {
comp.endDrag();
}
}
});</pre>
</body>
</html>