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
|
<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>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
<div id="cls-Ext.ux.ToolbarReorderer"></div>/**
* @class Ext.ux.ToolbarReorderer
* @extends Ext.ux.Reorderer
* Plugin which can be attached to any Ext.Toolbar instance. Provides ability to reorder toolbar items
* with drag and drop. Example:
* <pre>
* new Ext.Toolbar({
* plugins: [
* new Ext.ux.ToolbarReorderer({
* defaultReorderable: true
* })
* ],
* items: [
* {text: 'Button 1', reorderable: false},
* {text: 'Button 2'},
* {text: 'Button 3'}
* ]
* });
* </pre>
* In the example above, buttons 2 and 3 will be reorderable via drag and drop. An event named 'reordered'
* is added to the Toolbar, and is fired whenever a reorder has been completed.
*/
Ext.ux.ToolbarReorderer = Ext.extend(Ext.ux.Reorderer, {
<div id="method-Ext.ux.ToolbarReorderer-init"></div>/**
* Initializes the plugin, decorates the toolbar with additional functionality
*/
init: function(toolbar) {
<div id="prop-Ext.ux.ToolbarReorderer-buttonXCache"></div>/**
* This is used to store the correct x value of each button in the array. We need to use this
* instead of the button's reported x co-ordinate because the buttons are animated when they move -
* if another onDrag is fired while the button is still moving, the comparison x value will be incorrect
*/
this.buttonXCache = {};
toolbar.on({
scope: this,
add : function(toolbar, item) {
this.createIfReorderable(item);
}
});
//super sets a reference to the toolbar in this.target
Ext.ux.ToolbarReorderer.superclass.init.apply(this, arguments);
},
<div id="method-Ext.ux.ToolbarReorderer-createItemDD"></div>/**
* Sets up the given Toolbar item as a draggable
* @param {Mixed} button The item to make draggable (usually an Ext.Button instance)
*/
createItemDD: function(button) {
if (button.dd != undefined) {
return;
}
var el = button.getEl(),
id = el.id,
tbar = this.target,
me = this;
button.dd = new Ext.dd.DD(el, undefined, {
isTarget: false
});
//if a button has a menu, it is disabled while dragging with this function
var menuDisabler = function() {
return false;
};
Ext.apply(button.dd, {
b4StartDrag: function() {
this.startPosition = el.getXY();
//bump up the z index of the button being dragged but keep a reference to the original
this.startZIndex = el.getStyle('zIndex');
el.setStyle('zIndex', 10000);
button.suspendEvents();
if (button.menu) {
button.menu.on('beforeshow', menuDisabler, me);
}
},
startDrag: function() {
this.constrainTo(tbar.getEl());
this.setYConstraint(0, 0, 0);
},
onDrag: function(e) {
//calculate the button's index within the toolbar and its current midpoint
var buttonX = el.getXY()[0],
deltaX = buttonX - this.startPosition[0],
items = tbar.items.items,
oldIndex = items.indexOf(button),
newIndex;
//find which item in the toolbar the midpoint is currently over
for (var index = 0; index < items.length; index++) {
var item = items[index];
if (item.reorderable && item.id != button.id) {
//find the midpoint of the button
var box = item.getEl().getBox(),
midpoint = (me.buttonXCache[item.id] || box.x) + (box.width / 2),
movedLeft = oldIndex > index && deltaX < 0 && buttonX < midpoint,
movedRight = oldIndex < index && deltaX > 0 && (buttonX + el.getWidth()) > midpoint;
if (movedLeft || movedRight) {
me[movedLeft ? 'onMovedLeft' : 'onMovedRight'](button, index, oldIndex);
break;
}
}
}
},
<div id="method-Ext.ux.ToolbarReorderer-endDrag"></div>/**
* After the drag has been completed, make sure the button being dragged makes it back to
* the correct location and resets its z index
*/
endDrag: function() {
//we need to update the cache here for cases where the button was dragged but its
//position in the toolbar did not change
me.updateButtonXCache();
el.moveTo(me.buttonXCache[button.id], el.getY(), {
duration: me.animationDuration,
scope : this,
callback: function() {
button.resumeEvents();
if (button.menu) {
button.menu.un('beforeshow', menuDisabler, me);
}
tbar.fireEvent('reordered', button, tbar);
}
});
el.setStyle('zIndex', this.startZIndex);
}
});
},
onMovedLeft: function(item, newIndex, oldIndex) {
var tbar = this.target,
items = tbar.items.items;
if (newIndex != undefined && newIndex != oldIndex) {
//move the button currently under drag to its new location
tbar.remove(item, false);
tbar.insert(newIndex, item);
//set the correct x location of each item in the toolbar
this.updateButtonXCache();
for (var index = 0; index < items.length; index++) {
var obj = items[index],
newX = this.buttonXCache[obj.id];
if (item == obj) {
item.dd.startPosition[0] = newX;
} else {
var el = obj.getEl();
el.moveTo(newX, el.getY(), {duration: this.animationDuration});
}
}
}
},
onMovedRight: function(item, newIndex, oldIndex) {
this.onMovedLeft.apply(this, arguments);
},
/**
* @private
* Updates the internal cache of button X locations.
*/
updateButtonXCache: function() {
var tbar = this.target,
items = tbar.items,
totalX = tbar.getEl().getBox(true).x;
items.each(function(item) {
this.buttonXCache[item.id] = totalX;
totalX += item.getEl().getWidth();
}, this);
}
});</pre>
</body>
</html>
|
