Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / ux / Reorderer.js
diff --git a/examples/ux/Reorderer.js b/examples/ux/Reorderer.js
deleted file mode 100644 (file)
index e8dfa42..0000000
+++ /dev/null
@@ -1,425 +0,0 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-/**
- * @class Ext.ux.Reorderer
- * @extends Object
- * Generic base class for handling reordering of items. This base class must be extended to provide the
- * actual reordering functionality - the base class just sets up events and abstract logic functions.
- * It will fire events and set defaults, deferring the actual reordering to a doReorder implementation.
- * See Ext.ux.TabReorderer for an example.
- */
-Ext.ux.Reorderer = Ext.extend(Object, {
-    /**
-     * @property defaults
-     * @type Object
-     * Object containing default values for plugin configuration details. These can be overridden when
-     * constructing the plugin
-     */
-    defaults: {
-        /**
-         * @cfg animate
-         * @type Boolean
-         * If set to true, the rearranging of the toolbar items is animated
-         */
-        animate: true,
-        
-        /**
-         * @cfg animationDuration
-         * @type Number
-         * The duration of the animation used to move other toolbar items out of the way
-         */
-        animationDuration: 0.2,
-        
-        /**
-         * @cfg defaultReorderable
-         * @type Boolean
-         * True to make every toolbar draggable unless reorderable is specifically set to false.
-         * This defaults to false
-         */
-        defaultReorderable: false
-    },
-    
-    /**
-     * Creates the plugin instance, applies defaults
-     * @constructor
-     * @param {Object} config Optional config object
-     */
-    constructor: function(config) {
-        Ext.apply(this, config || {}, this.defaults);
-    },
-    
-    /**
-     * Initializes the plugin, stores a reference to the target 
-     * @param {Mixed} target The target component which contains the reorderable items
-     */
-    init: function(target) {
-        /**
-         * @property target
-         * @type Ext.Component
-         * Reference to the target component which contains the reorderable items
-         */
-        this.target = target;
-        
-        this.initEvents();
-        
-        var items  = this.getItems(),
-            length = items.length,
-            i;
-        
-        for (i = 0; i < length; i++) {
-            this.createIfReorderable(items[i]);
-        }
-    },
-    
-    /**
-     * Reorders the items in the target component according to the given mapping object. Example:
-     * this.reorder({
-     *     1: 5,
-     *     3: 2
-     * });
-     * Would move the item at index 1 to index 5, and the item at index 3 to index 2
-     * @param {Object} mappings Object containing current item index as key and new index as property
-     */
-    reorder: function(mappings) {
-        var target = this.target;
-        
-        if (target.fireEvent('before-reorder', mappings, target, this) !== false) {
-            this.doReorder(mappings);
-            
-            target.fireEvent('reorder', mappings, target, this);
-        }
-    },
-    
-    /**
-     * Abstract function to perform the actual reordering. This MUST be overridden in a subclass
-     * @param {Object} mappings Mappings of the old item indexes to new item indexes
-     */
-    doReorder: function(paramName) {
-        throw new Error("doReorder must be implemented in the Ext.ux.Reorderer subclass");
-    },
-    
-    /**
-     * Should create and return an Ext.dd.DD for the given item. This MUST be overridden in a subclass
-     * @param {Mixed} item The item to create a DD for. This could be a TabPanel tab, a Toolbar button, etc
-     * @return {Ext.dd.DD} The DD for the given item
-     */
-    createItemDD: function(item) {
-        throw new Error("createItemDD must be implemented in the Ext.ux.Reorderer subclass");
-    },
-    
-    /**
-     * 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) {
-        var el   = button.getEl(),
-            id   = el.id,
-            tbar = this.target,
-            me   = this;
-        
-        button.dd = new Ext.dd.DD(el, undefined, {
-            isTarget: false
-        });
-        
-        button.dd.constrainTo(tbar.getEl());
-        button.dd.setYConstraint(0, 0, 0);
-        
-        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();
-            },
-            
-            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], undefined, {
-                    duration: me.animationDuration,
-                    scope   : this,
-                    callback: function() {
-                        button.resumeEvents();
-                        
-                        tbar.fireEvent('reordered', button, tbar);
-                    }
-                });
-                
-                el.setStyle('zIndex', this.startZIndex);
-            }
-        });
-    },
-    
-    /**
-     * @private
-     * Creates a DD instance for a given item if it is reorderable
-     * @param {Mixed} item The item
-     */
-    createIfReorderable: function(item) {
-        if (this.defaultReorderable && item.reorderable == undefined) {
-            item.reorderable = true;
-        }
-        
-        if (item.reorderable && !item.dd) {
-            if (item.rendered) {
-                this.createItemDD(item);                
-            } else {
-                item.on('render', this.createItemDD.createDelegate(this, [item]), this, {single: true});
-            }
-        }
-    },
-    
-    /**
-     * Returns an array of items which will be made draggable. This defaults to the contents of this.target.items,
-     * but can be overridden - e.g. for TabPanels
-     * @return {Array} The array of items which will be made draggable
-     */
-    getItems: function() {
-        return this.target.items.items;
-    },
-    
-    /**
-     * Adds before-reorder and reorder events to the target component
-     */
-    initEvents: function() {
-        this.target.addEvents(
-          /**
-           * @event before-reorder
-           * Fires before a reorder occurs. Return false to cancel
-           * @param {Object} mappings Mappings of the old item indexes to new item indexes
-           * @param {Mixed} component The target component
-           * @param {Ext.ux.TabReorderer} this The plugin instance
-           */
-          'before-reorder',
-          
-          /**
-           * @event reorder
-           * Fires after a reorder has occured.
-           * @param {Object} mappings Mappings of the old item indexes to the new item indexes
-           * @param {Mixed} component The target component
-           * @param {Ext.ux.TabReorderer} this The plugin instance
-           */
-          'reorder'
-        );
-    }
-});
-
-/**
- * @class Ext.ux.HBoxReorderer
- * @extends Ext.ux.Reorderer
- * Description
- */
-Ext.ux.HBoxReorderer = Ext.extend(Ext.ux.Reorderer, {
-    /**
-     * Initializes the plugin, decorates the container with additional functionality
-     */
-    init: function(container) {
-        /**
-         * 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 = {};
-        
-        container.on({
-            scope: this,
-            add  : function(container, item) {
-                this.createIfReorderable(item);
-            }
-        });
-        
-        //super sets a reference to the toolbar in this.target
-        Ext.ux.HBoxReorderer.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,
-            me   = this,
-            tbar = me.target;
-        
-        button.dd = new Ext.dd.DD(el, undefined, {
-            isTarget: false
-        });
-        
-        el.applyStyles({
-            position: 'absolute'
-        });
-        
-        //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,
-                    length   = items.length,
-                    oldIndex = items.indexOf(button),
-                    newIndex, index, item;
-                
-                //find which item in the toolbar the midpoint is currently over
-                for (index = 0; index < length; index++) {
-                    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,
-            length = items.length,
-            index;
-        
-        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 (index = 0; index < 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