X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..HEAD:/examples/ux/ToolbarReorderer.js

diff --git a/examples/ux/ToolbarReorderer.js b/examples/ux/ToolbarReorderer.js
deleted file mode 100644
index 8c25d7ea..00000000
--- a/examples/ux/ToolbarReorderer.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-/**
- * @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, {
-    /**
-     * Initializes the plugin, decorates the toolbar with additional functionality
-     */
-    init: function(toolbar) {
-        /**
-         * 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);
-    },
-        
-    /**
-     * 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;
-                        }                        
-                    }
-                }
-            },
-            
-            /**
-             * 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);
-    }
-});
\ No newline at end of file