3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.ux.ToolbarReorderer
9 * @extends Ext.ux.Reorderer
10 * Plugin which can be attached to any Ext.Toolbar instance. Provides ability to reorder toolbar items
11 * with drag and drop. Example:
15 * new Ext.ux.ToolbarReorderer({
16 * defaultReorderable: true
20 * {text: 'Button 1', reorderable: false},
26 * In the example above, buttons 2 and 3 will be reorderable via drag and drop. An event named 'reordered'
27 * is added to the Toolbar, and is fired whenever a reorder has been completed.
29 Ext.ux.ToolbarReorderer = Ext.extend(Ext.ux.Reorderer, {
31 * Initializes the plugin, decorates the toolbar with additional functionality
33 init: function(toolbar) {
35 * This is used to store the correct x value of each button in the array. We need to use this
36 * instead of the button's reported x co-ordinate because the buttons are animated when they move -
37 * if another onDrag is fired while the button is still moving, the comparison x value will be incorrect
39 this.buttonXCache = {};
43 add : function(toolbar, item) {
44 this.createIfReorderable(item);
48 //super sets a reference to the toolbar in this.target
49 Ext.ux.ToolbarReorderer.superclass.init.apply(this, arguments);
53 * Sets up the given Toolbar item as a draggable
54 * @param {Mixed} button The item to make draggable (usually an Ext.Button instance)
56 createItemDD: function(button) {
57 if (button.dd != undefined) return;
59 var el = button.getEl(),
64 button.dd = new Ext.dd.DD(el, undefined, {
68 //if a button has a menu, it is disabled while dragging with this function
69 var menuDisabler = function() {
73 Ext.apply(button.dd, {
74 b4StartDrag: function() {
75 this.startPosition = el.getXY();
77 //bump up the z index of the button being dragged but keep a reference to the original
78 this.startZIndex = el.getStyle('zIndex');
79 el.setStyle('zIndex', 10000);
81 button.suspendEvents();
83 button.menu.on('beforeshow', menuDisabler, me);
87 startDrag: function() {
88 this.constrainTo(tbar.getEl());
89 this.setYConstraint(0, 0, 0);
93 //calculate the button's index within the toolbar and its current midpoint
94 var buttonX = el.getXY()[0],
95 deltaX = buttonX - this.startPosition[0],
96 items = tbar.items.items,
97 oldIndex = items.indexOf(button),
100 //find which item in the toolbar the midpoint is currently over
101 for (var index = 0; index < items.length; index++) {
102 var item = items[index];
104 if (item.reorderable && item.id != button.id) {
105 //find the midpoint of the button
106 var box = item.getEl().getBox(),
107 midpoint = (me.buttonXCache[item.id] || box.x) + (box.width / 2),
108 movedLeft = oldIndex > index && deltaX < 0 && buttonX < midpoint,
109 movedRight = oldIndex < index && deltaX > 0 && (buttonX + el.getWidth()) > midpoint;
111 if (movedLeft || movedRight) {
112 me[movedLeft ? 'onMovedLeft' : 'onMovedRight'](button, index, oldIndex);
120 * After the drag has been completed, make sure the button being dragged makes it back to
121 * the correct location and resets its z index
123 endDrag: function() {
124 //we need to update the cache here for cases where the button was dragged but its
125 //position in the toolbar did not change
126 me.updateButtonXCache();
128 el.moveTo(me.buttonXCache[button.id], el.getY(), {
129 duration: me.animationDuration,
131 callback: function() {
132 button.resumeEvents();
134 button.menu.un('beforeshow', menuDisabler, me);
137 tbar.fireEvent('reordered', button, tbar);
141 el.setStyle('zIndex', this.startZIndex);
146 onMovedLeft: function(item, newIndex, oldIndex) {
147 var tbar = this.target,
148 items = tbar.items.items;
150 if (newIndex != undefined && newIndex != oldIndex) {
151 //move the button currently under drag to its new location
152 tbar.remove(item, false);
153 tbar.insert(newIndex, item);
155 //set the correct x location of each item in the toolbar
156 this.updateButtonXCache();
157 for (var index = 0; index < items.length; index++) {
158 var obj = items[index],
159 newX = this.buttonXCache[obj.id];
162 item.dd.startPosition[0] = newX;
164 var el = obj.getEl();
166 el.moveTo(newX, el.getY(), {duration: this.animationDuration});
172 onMovedRight: function(item, newIndex, oldIndex) {
173 this.onMovedLeft.apply(this, arguments);
178 * Updates the internal cache of button X locations.
180 updateButtonXCache: function() {
181 var tbar = this.target,
183 totalX = tbar.getEl().getBox(true).x;
185 items.each(function(item) {
186 this.buttonXCache[item.id] = totalX;
188 totalX += item.getEl().getWidth();