DragSelector.html
8.02 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!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-ux-DataView-DragSelector'>/**
</span> * @class Ext.ux.DataView.DragSelector
* @extends Object
* @author Ed Spencer
*
*/
Ext.define('Ext.ux.DataView.DragSelector', {
requires: ['Ext.dd.DragTracker', 'Ext.util.Region'],
<span id='Ext-ux-DataView-DragSelector-method-init'> /**
</span> * Initializes the plugin by setting up the drag tracker
*/
init: function(dataview) {
<span id='Ext-ux-DataView-DragSelector-property-dataview'> /**
</span> * @property dataview
* @type Ext.view.View
* The DataView bound to this instance
*/
this.dataview = dataview;
dataview.mon(dataview, {
beforecontainerclick: this.cancelClick,
scope: this,
render: {
fn: this.onRender,
scope: this,
single: true
}
});
},
<span id='Ext-ux-DataView-DragSelector-method-onRender'> /**
</span> * @private
* Called when the attached DataView is rendered. This sets up the DragTracker instance that will be used
* to created a dragged selection area
*/
onRender: function() {
<span id='Ext-ux-DataView-DragSelector-property-tracker'> /**
</span> * @property tracker
* @type Ext.dd.DragTracker
* The DragTracker attached to this instance. Note that the 4 on* functions are called in the scope of the
* DragTracker ('this' refers to the DragTracker inside those functions), so we pass a reference to the
* DragSelector so that we can call this class's functions.
*/
this.tracker = Ext.create('Ext.dd.DragTracker', {
dataview: this.dataview,
el: this.dataview.el,
dragSelector: this,
onBeforeStart: this.onBeforeStart,
onStart: this.onStart,
onDrag : this.onDrag,
onEnd : this.onEnd
});
<span id='Ext-ux-DataView-DragSelector-property-dragRegion'> /**
</span> * @property dragRegion
* @type Ext.util.Region
* Represents the region currently dragged out by the user. This is used to figure out which dataview nodes are
* in the selected area and to set the size of the Proxy element used to highlight the current drag area
*/
this.dragRegion = Ext.create('Ext.util.Region');
},
<span id='Ext-ux-DataView-DragSelector-method-onBeforeStart'> /**
</span> * @private
* Listener attached to the DragTracker's onBeforeStart event. Returns false if the drag didn't start within the
* DataView's el
*/
onBeforeStart: function(e) {
return e.target == this.dataview.getEl().dom;
},
<span id='Ext-ux-DataView-DragSelector-method-onStart'> /**
</span> * @private
* Listener attached to the DragTracker's onStart event. Cancel's the DataView's containerclick event from firing
* and sets the start co-ordinates of the Proxy element. Clears any existing DataView selection
* @param {Ext.EventObject} e The click event
*/
onStart: function(e) {
var dragSelector = this.dragSelector,
dataview = this.dataview;
// Flag which controls whether the cancelClick method vetoes the processing of the DataView's containerclick event.
// On IE (where else), this needs to remain set for a millisecond after mouseup because even though the mouse has
// moved, the mouseup will still trigger a click event.
this.dragging = true;
//here we reset and show the selection proxy element and cache the regions each item in the dataview take up
dragSelector.fillRegions();
dragSelector.getProxy().show();
dataview.getSelectionModel().deselectAll();
},
<span id='Ext-ux-DataView-DragSelector-method-cancelClick'> /**
</span> * @private
* Reusable handler that's used to cancel the container click event when dragging on the dataview. See onStart for
* details
*/
cancelClick: function() {
return !this.tracker.dragging;
},
<span id='Ext-ux-DataView-DragSelector-method-onDrag'> /**
</span> * @private
* Listener attached to the DragTracker's onDrag event. Figures out how large the drag selection area should be and
* updates the proxy element's size to match. Then iterates over all of the rendered items and marks them selected
* if the drag region touches them
* @param {Ext.EventObject} e The drag event
*/
onDrag: function(e) {
var dragSelector = this.dragSelector,
selModel = dragSelector.dataview.getSelectionModel(),
dragRegion = dragSelector.dragRegion,
bodyRegion = dragSelector.bodyRegion,
proxy = dragSelector.getProxy(),
regions = dragSelector.regions,
length = regions.length,
startXY = this.startXY,
currentXY = this.getXY(),
minX = Math.min(startXY[0], currentXY[0]),
minY = Math.min(startXY[1], currentXY[1]),
width = Math.abs(startXY[0] - currentXY[0]),
height = Math.abs(startXY[1] - currentXY[1]),
region, selected, i;
Ext.apply(dragRegion, {
top: minY,
left: minX,
right: minX + width,
bottom: minY + height
});
dragRegion.constrainTo(bodyRegion);
proxy.setRegion(dragRegion);
for (i = 0; i < length; i++) {
region = regions[i];
selected = dragRegion.intersect(region);
if (selected) {
selModel.select(i, true);
} else {
selModel.deselect(i);
}
}
},
<span id='Ext-ux-DataView-DragSelector-method-onEnd'> /**
</span> * @private
* Listener attached to the DragTracker's onEnd event. This is a delayed function which executes 1
* millisecond after it has been called. This is because the dragging flag must remain active to cancel
* the containerclick event which the mouseup event will trigger.
* @param {Ext.EventObject} e The event object
*/
onEnd: Ext.Function.createDelayed(function(e) {
var dataview = this.dataview,
selModel = dataview.getSelectionModel(),
dragSelector = this.dragSelector;
this.dragging = false;
dragSelector.getProxy().hide();
}, 1),
<span id='Ext-ux-DataView-DragSelector-method-getProxy'> /**
</span> * @private
* Creates a Proxy element that will be used to highlight the drag selection region
* @return {Ext.Element} The Proxy element
*/
getProxy: function() {
if (!this.proxy) {
this.proxy = this.dataview.getEl().createChild({
tag: 'div',
cls: 'x-view-selector'
});
}
return this.proxy;
},
<span id='Ext-ux-DataView-DragSelector-method-fillRegions'> /**
</span> * @private
* Gets the region taken up by each rendered node in the DataView. We use these regions to figure out which nodes
* to select based on the selector region the user has dragged out
*/
fillRegions: function() {
var dataview = this.dataview,
regions = this.regions = [];
dataview.all.each(function(node) {
regions.push(node.getRegion());
});
this.bodyRegion = dataview.getEl().getRegion();
}
});</pre>
</body>
</html>