examples/ux/ToolbarReorderer.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   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:
  12  * <pre>
  13  * new Ext.Toolbar({
  14  *     plugins: [
  15  *         new Ext.ux.ToolbarReorderer({
  16  *             defaultReorderable: true
  17  *         })
  18  *     ],
  19  *     items: [
  20  *       {text: 'Button 1', reorderable: false},
  21  *       {text: 'Button 2'},
  22  *       {text: 'Button 3'}
  23  *     ]
  24  * });
  25  * </pre>
  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.
  28  */
  29 Ext.ux.ToolbarReorderer = Ext.extend(Ext.ux.Reorderer, {
  30     /**
  31      * Initializes the plugin, decorates the toolbar with additional functionality
  32      */
  33     init: function(toolbar) {
  34         /**
  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
  38          */
  39         this.buttonXCache = {};
  40
  41         toolbar.on({
  42             scope: this,
  43             add  : function(toolbar, item) {
  44                 this.createIfReorderable(item);
  45             }
  46         });
  47
  48         //super sets a reference to the toolbar in this.target
  49         Ext.ux.ToolbarReorderer.superclass.init.apply(this, arguments);
  50     },
  51
  52     /**
  53      * Sets up the given Toolbar item as a draggable
  54      * @param {Mixed} button The item to make draggable (usually an Ext.Button instance)
  55      */
  56     createItemDD: function(button) {
  57         if (button.dd != undefined) return;
  58
  59         var el   = button.getEl(),
  60             id   = el.id,
  61             tbar = this.target,
  62             me   = this;
  63
  64         button.dd = new Ext.dd.DD(el, undefined, {
  65             isTarget: false
  66         });
  67
  68         //if a button has a menu, it is disabled while dragging with this function
  69         var menuDisabler = function() {
  70             return false;
  71         };
  72
  73         Ext.apply(button.dd, {
  74             b4StartDrag: function() {
  75                 this.startPosition = el.getXY();
  76
  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);
  80
  81                 button.suspendEvents();
  82                 if (button.menu) {
  83                     button.menu.on('beforeshow', menuDisabler, me);
  84                 }
  85             },
  86
  87             startDrag: function() {
  88                 this.constrainTo(tbar.getEl());
  89                 this.setYConstraint(0, 0, 0);
  90             },
  91
  92             onDrag: function(e) {
  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),
  98                     newIndex;
  99
 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];
 103
 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;
 110
 111                         if (movedLeft || movedRight) {
 112                             me[movedLeft ? 'onMovedLeft' : 'onMovedRight'](button, index, oldIndex);
 113                             break;
 114                         }
 115                     }
 116                 }
 117             },
 118
 119             /**
 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
 122              */
 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();
 127
 128                 el.moveTo(me.buttonXCache[button.id], el.getY(), {
 129                     duration: me.animationDuration,
 130                     scope   : this,
 131                     callback: function() {
 132                         button.resumeEvents();
 133                         if (button.menu) {
 134                             button.menu.un('beforeshow', menuDisabler, me);
 135                         }
 136
 137                         tbar.fireEvent('reordered', button, tbar);
 138                     }
 139                 });
 140
 141                 el.setStyle('zIndex', this.startZIndex);
 142             }
 143         });
 144     },
 145
 146     onMovedLeft: function(item, newIndex, oldIndex) {
 147         var tbar  = this.target,
 148             items = tbar.items.items;
 149
 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);
 154
 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];
 160
 161                 if (item == obj) {
 162                     item.dd.startPosition[0] = newX;
 163                 } else {
 164                     var el = obj.getEl();
 165
 166                     el.moveTo(newX, el.getY(), {duration: this.animationDuration});
 167                 }
 168             }
 169         }
 170     },
 171
 172     onMovedRight: function(item, newIndex, oldIndex) {
 173         this.onMovedLeft.apply(this, arguments);
 174     },
 175
 176     /**
 177      * @private
 178      * Updates the internal cache of button X locations.
 179      */
 180     updateButtonXCache: function() {
 181         var tbar   = this.target,
 182             items  = tbar.items,
 183             totalX = tbar.getEl().getBox(true).x;
 184
 185         items.each(function(item) {
 186             this.buttonXCache[item.id] = totalX;
 187
 188             totalX += item.getEl().getWidth();
 189         }, this);
 190     }
 191 });