extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/util/Animate.js

@@ -1,426 +0,0 @@
-/**
- * This animation class is a mixin.
- *
- * Ext.util.Animate provides an API for the creation of animated transitions of properties and styles.
- * This class is used as a mixin and currently applied to {@link Ext.Element}, {@link Ext.CompositeElement},
- * {@link Ext.draw.Sprite}, {@link Ext.draw.CompositeSprite}, and {@link Ext.Component}.  Note that Components
- * have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and
- * opacity (color, paddings, and margins can not be animated).
- *
- * ## Animation Basics
- *
- * All animations require three things - `easing`, `duration`, and `to` (the final end value for each property)
- * you wish to animate. Easing and duration are defaulted values specified below.
- * Easing describes how the intermediate values used during a transition will be calculated.
- * {@link Ext.fx.Anim#easing Easing} allows for a transition to change speed over its duration.
- * You may use the defaults for easing and duration, but you must always set a
- * {@link Ext.fx.Anim#to to} property which is the end value for all animations.
- *
- * Popular element 'to' configurations are:
- *
- *  - opacity
- *  - x
- *  - y
- *  - color
- *  - height
- *  - width
- *
- * Popular sprite 'to' configurations are:
- *
- *  - translation
- *  - path
- *  - scale
- *  - stroke
- *  - rotation
- *
- * The default duration for animations is 250 (which is a 1/4 of a second).  Duration is denoted in
- * milliseconds.  Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve
- * used for all animations is 'ease'.  Popular easing functions are included and can be found in {@link Ext.fx.Anim#easing Easing}.
- *
- * For example, a simple animation to fade out an element with a default easing and duration:
- *
- *     var p1 = Ext.get('myElementId');
- *
- *     p1.animate({
- *         to: {
- *             opacity: 0
- *         }
- *     });
- *
- * To make this animation fade out in a tenth of a second:
- *
- *     var p1 = Ext.get('myElementId');
- *
- *     p1.animate({
- *        duration: 100,
- *         to: {
- *             opacity: 0
- *         }
- *     });
- *
- * ## Animation Queues
- *
- * By default all animations are added to a queue which allows for animation via a chain-style API.
- * For example, the following code will queue 4 animations which occur sequentially (one right after the other):
- *
- *     p1.animate({
- *         to: {
- *             x: 500
- *         }
- *     }).animate({
- *         to: {
- *             y: 150
- *         }
- *     }).animate({
- *         to: {
- *             backgroundColor: '#f00'  //red
- *         }
- *     }).animate({
- *         to: {
- *             opacity: 0
- *         }
- *     });
- *
- * You can change this behavior by calling the {@link Ext.util.Animate#syncFx syncFx} method and all
- * subsequent animations for the specified target will be run concurrently (at the same time).
- *
- *     p1.syncFx();  //this will make all animations run at the same time
- *
- *     p1.animate({
- *         to: {
- *             x: 500
- *         }
- *     }).animate({
- *         to: {
- *             y: 150
- *         }
- *     }).animate({
- *         to: {
- *             backgroundColor: '#f00'  //red
- *         }
- *     }).animate({
- *         to: {
- *             opacity: 0
- *         }
- *     });
- *
- * This works the same as:
- *
- *     p1.animate({
- *         to: {
- *             x: 500,
- *             y: 150,
- *             backgroundColor: '#f00'  //red
- *             opacity: 0
- *         }
- *     });
- *
- * The {@link Ext.util.Animate#stopAnimation stopAnimation} method can be used to stop any
- * currently running animations and clear any queued animations.
- *
- * ## Animation Keyframes
- *
- * You can also set up complex animations with {@link Ext.fx.Anim#keyframes keyframes} which follow the
- * CSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites.
- * The previous example can be written with the following syntax:
- *
- *     p1.animate({
- *         duration: 1000,  //one second total
- *         keyframes: {
- *             25: {     //from 0 to 250ms (25%)
- *                 x: 0
- *             },
- *             50: {   //from 250ms to 500ms (50%)
- *                 y: 0
- *             },
- *             75: {  //from 500ms to 750ms (75%)
- *                 backgroundColor: '#f00'  //red
- *             },
- *             100: {  //from 750ms to 1sec
- *                 opacity: 0
- *             }
- *         }
- *     });
- *
- * ## Animation Events
- *
- * Each animation you create has events for {@link Ext.fx.Anim#beforeanimate beforeanimate},
- * {@link Ext.fx.Anim#afteranimate afteranimate}, and {@link Ext.fx.Anim#lastframe lastframe}.
- * Keyframed animations adds an additional {@link Ext.fx.Animator#keyframe keyframe} event which
- * fires for each keyframe in your animation.
- *
- * All animations support the {@link Ext.util.Observable#listeners listeners} configuration to attact functions to these events.
- *
- *     startAnimate: function() {
- *         var p1 = Ext.get('myElementId');
- *         p1.animate({
- *            duration: 100,
- *             to: {
- *                 opacity: 0
- *             },
- *             listeners: {
- *                 beforeanimate:  function() {
- *                     // Execute my custom method before the animation
- *                     this.myBeforeAnimateFn();
- *                 },
- *                 afteranimate: function() {
- *                     // Execute my custom method after the animation
- *                     this.myAfterAnimateFn();
- *                 },
- *                 scope: this
- *         });
- *     },
- *     myBeforeAnimateFn: function() {
- *       // My custom logic
- *     },
- *     myAfterAnimateFn: function() {
- *       // My custom logic
- *     }
- *
- * Due to the fact that animations run asynchronously, you can determine if an animation is currently
- * running on any target by using the {@link Ext.util.Animate#getActiveAnimation getActiveAnimation}
- * method.  This method will return false if there are no active animations or return the currently
- * running {@link Ext.fx.Anim} instance.
- *
- * In this example, we're going to wait for the current animation to finish, then stop any other
- * queued animations before we fade our element's opacity to 0:
- *
- *     var curAnim = p1.getActiveAnimation();
- *     if (curAnim) {
- *         curAnim.on('afteranimate', function() {
- *             p1.stopAnimation();
- *             p1.animate({
- *                 to: {
- *                     opacity: 0
- *                 }
- *             });
- *         });
- *     }
- */
-Ext.define('Ext.util.Animate', {
-
-    uses: ['Ext.fx.Manager', 'Ext.fx.Anim'],
-
-    /**
-     * Perform custom animation on this object.
-     *
-     * This method is applicable to both the {@link Ext.Component Component} class and the {@link Ext.Element Element}
-     * class. It performs animated transitions of certain properties of this object over a specified timeline.
-     *
-     * The sole parameter is an object which specifies start property values, end property values, and properties which
-     * describe the timeline. 
-     *
-     * ### Animating an {@link Ext.Element Element}
-     *
-     * When animating an Element, the following properties may be specified in `from`, `to`, and `keyframe` objects:
-     *
-     *   - `x` - The page X position in pixels.
-     *
-     *   - `y` - The page Y position in pixels
-     *
-     *   - `left` - The element's CSS `left` value. Units must be supplied.
-     *
-     *   - `top` - The element's CSS `top` value. Units must be supplied.
-     *
-     *   - `width` - The element's CSS `width` value. Units must be supplied.
-     *
-     *   - `height` - The element's CSS `height` value. Units must be supplied.
-     *
-     *   - `scrollLeft` - The element's `scrollLeft` value.
-     *
-     *   - `scrollTop` - The element's `scrollLeft` value.
-     *
-     *   - `opacity` - The element's `opacity` value. This must be a value between `0` and `1`.
-     *
-     * **Be aware than animating an Element which is being used by an Ext Component without in some way informing the
-     * Component about the changed element state will result in incorrect Component behaviour. This is because the
-     * Component will be using the old state of the element. To avoid this problem, it is now possible to directly
-     * animate certain properties of Components.**
-     *
-     * ### Animating a {@link Ext.Component Component}
-     *
-     * When animating a Component, the following properties may be specified in `from`, `to`, and `keyframe` objects:
-     *
-     *   - `x` - The Component's page X position in pixels.
-     *
-     *   - `y` - The Component's page Y position in pixels
-     *
-     *   - `left` - The Component's `left` value in pixels.
-     *
-     *   - `top` - The Component's `top` value in pixels.
-     *
-     *   - `width` - The Component's `width` value in pixels.
-     *
-     *   - `width` - The Component's `width` value in pixels.
-     *
-     *   - `dynamic` - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation.
-     *     *Use sparingly as laying out on every intermediate size change is an expensive operation.*
-     *
-     * For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct:
-     *
-     *     myWindow = Ext.create('Ext.window.Window', {
-     *         title: 'Test Component animation',
-     *         width: 500,
-     *         height: 300,
-     *         layout: {
-     *             type: 'hbox',
-     *             align: 'stretch'
-     *         },
-     *         items: [{
-     *             title: 'Left: 33%',
-     *             margins: '5 0 5 5',
-     *             flex: 1
-     *         }, {
-     *             title: 'Left: 66%',
-     *             margins: '5 5 5 5',
-     *             flex: 2
-     *         }]
-     *     });
-     *     myWindow.show();
-     *     myWindow.header.el.on('click', function() {
-     *         myWindow.animate({
-     *             to: {
-     *                 width: (myWindow.getWidth() == 500) ? 700 : 500,
-     *                 height: (myWindow.getHeight() == 300) ? 400 : 300,
-     *             }
-     *         });
-     *     });
-     *
-     * For performance reasons, by default, the internal layout is only updated when the Window reaches its final `"to"`
-     * size. If dynamic updating of the Window's child Components is required, then configure the animation with
-     * `dynamic: true` and the two child items will maintain their proportions during the animation.
-     *
-     * @param {Object} config An object containing properties which describe the animation's start and end states, and
-     * the timeline of the animation. Of the properties listed below, only **`to`** is mandatory.
-     * 
-     * Properties include:
-     *
-     * @param {Object} config.from
-     * An object which specifies start values for the properties being animated. If not supplied, properties are
-     * animated from current settings. The actual properties which may be animated depend upon ths object being
-     * animated. See the sections below on Element and Component animation.
-     *
-     * @param {Object} config.to
-     * An object which specifies end values for the properties being animated.
-     *
-     * @param {Number} config.duration
-     * The duration **in milliseconds** for which the animation will run.
-     *
-     * @param {String} config.easing
-     * A string value describing an easing type to modify the rate of change from the default linear to non-linear.
-     * Values may be one of:
-     *
-     *   - ease
-     *   - easeIn
-     *   - easeOut
-     *   - easeInOut
-     *   - backIn
-     *   - backOut
-     *   - elasticIn
-     *   - elasticOut
-     *   - bounceIn
-     *   - bounceOut
-     *
-     * @param {Object} config.keyframes
-     * This is an object which describes the state of animated properties at certain points along the timeline. it is an
-     * object containing properties who's names are the percentage along the timeline being described and who's values
-     * specify the animation state at that point.
-     *
-     * @param {Object} config.listeners
-     * This is a standard {@link Ext.util.Observable#listeners listeners} configuration object which may be used to
-     * inject behaviour at either the `beforeanimate` event or the `afteranimate` event.
-     *
-     * @return {Object} this
-     */
-    animate: function(animObj) {
-        var me = this;
-        if (Ext.fx.Manager.hasFxBlock(me.id)) {
-            return me;
-        }
-        Ext.fx.Manager.queueFx(new Ext.fx.Anim(me.anim(animObj)));
-        return this;
-    },
-
-    // @private - process the passed fx configuration.
-    anim: function(config) {
-        if (!Ext.isObject(config)) {
-            return (config) ? {} : false;
-        }
-
-        var me = this;
-
-        if (config.stopAnimation) {
-            me.stopAnimation();
-        }
-
-        Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id));
-
-        return Ext.apply({
-            target: me,
-            paused: true
-        }, config);
-    },
-
-    /**
-     * Stops any running effects and clears this object's internal effects queue if it contains any additional effects
-     * that haven't started yet.
-     * @deprecated 4.0 Replaced by {@link #stopAnimation}
-     * @return {Ext.Element} The Element
-     * @method
-     */
-    stopFx: Ext.Function.alias(Ext.util.Animate, 'stopAnimation'),
-
-    /**
-     * Stops any running effects and clears this object's internal effects queue if it contains any additional effects
-     * that haven't started yet.
-     * @return {Ext.Element} The Element
-     */
-    stopAnimation: function() {
-        Ext.fx.Manager.stopAnimation(this.id);
-        return this;
-    },
-
-    /**
-     * Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite
-     * of {@link #sequenceFx}.
-     * @return {Object} this
-     */
-    syncFx: function() {
-        Ext.fx.Manager.setFxDefaults(this.id, {
-            concurrent: true
-        });
-        return this;
-    },
-
-    /**
-     * Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the
-     * opposite of {@link #syncFx}.
-     * @return {Object} this
-     */
-    sequenceFx: function() {
-        Ext.fx.Manager.setFxDefaults(this.id, {
-            concurrent: false
-        });
-        return this;
-    },
-
-    /**
-     * @deprecated 4.0 Replaced by {@link #getActiveAnimation}
-     * @inheritdoc Ext.util.Animate#getActiveAnimation
-     * @method
-     */
-    hasActiveFx: Ext.Function.alias(Ext.util.Animate, 'getActiveAnimation'),
-
-    /**
-     * Returns the current animation if this object has any effects actively running or queued, else returns false.
-     * @return {Ext.fx.Anim/Boolean} Anim if element has active effects, else false
-     */
-    getActiveAnimation: function() {
-        return Ext.fx.Manager.getActiveAnimation(this.id);
-    }
-}, function(){
-    // Apply Animate mixin manually until Element is defined in the proper 4.x way
-    Ext.applyIf(Ext.Element.prototype, this.prototype);
-    // We need to call this again so the animation methods get copied over to CE
-    Ext.CompositeElementLite.importElementMethods();
-});

data/app/assets/javascripts/src/util/Bindable.js

@@ -1,102 +0,0 @@
-/**
- * This class is used as a mixin.
- *
- * This class is to be used to provide basic methods for binding/unbinding stores to other
- * classes. In general it will not be used directly.
- */
-Ext.define('Ext.util.Bindable', {
-    
-    /**
-     * Binds a store to this instance.
-     * @param {Ext.data.AbstractStore} store The store to bind (may be null to unbind the existing store).
-     * @param {Boolean} initial (Optional) true to not remove listeners
-     */
-    bindStore: function(store, initial){
-        var me = this,
-            oldStore = me.store;
-            
-        if (!initial && me.store) {
-            if (store !== oldStore && oldStore.autoDestroy) {
-                oldStore.destroyStore();
-            } else {
-                me.unbindStoreListeners(oldStore);
-            }
-            me.onUnbindStore(oldStore, initial);
-        }
-        if (store) {
-            store = Ext.data.StoreManager.lookup(store);
-            me.bindStoreListeners(store);
-            me.onBindStore(store, initial);
-        }
-        me.store = store || null;
-        return me;
-    },
-    
-    /**
-     * Gets the current store instance.
-     * @return {Ext.data.AbstractStore} The store, null if one does not exist.
-     */
-    getStore: function(){
-        return this.store;
-    },
-    
-    /**
-     * Unbinds listeners from this component to the store. By default it will remove
-     * anything bound by the bindStoreListeners method, however it can be overridden
-     * in a subclass to provide any more complicated handling.
-     * @protected 
-     * @param {Ext.data.AbstractStore} store The store to unbind from
-     */
-    unbindStoreListeners: function(store) {
-        // Can be overridden in the subclass for more complex removal
-        var listeners = this.storeListeners;
-        if (listeners) {
-            store.un(listeners);
-        }
-    },
-    
-    /**
-     * Binds listeners for this component to the store. By default it will add
-     * anything bound by the getStoreListeners method, however it can be overridden
-     * in a subclass to provide any more complicated handling.
-     * @protected 
-     * @param {Ext.data.AbstractStore} store The store to bind to
-     */
-    bindStoreListeners: function(store) {
-        // Can be overridden in the subclass for more complex binding
-        var me = this,
-            listeners = Ext.apply({}, me.getStoreListeners());
-            
-        if (!listeners.scope) {
-            listeners.scope = me;
-        }
-        me.storeListeners = listeners;
-        store.on(listeners);
-    },
-    
-    /**
-     * Gets the listeners to bind to a new store.
-     * @protected
-     * @return {Object} The listeners to be bound to the store in object literal form. The scope
-     * may be omitted, it is assumed to be the current instance.
-     */
-    getStoreListeners: Ext.emptyFn,
-    
-    /**
-     * Template method, it is called when an existing store is unbound
-     * from the current instance.
-     * @protected
-     * @param {Ext.data.AbstractStore} store The store being unbound
-     * @param {Boolean} initial True if this store is being bound as initialization of the instance.
-     */
-    onUnbindStore: Ext.emptyFn,
-    
-    /**
-     * Template method, it is called when a new store is bound
-     * to the current instance.
-     * @protected
-     * @param {Ext.data.AbstractStore} store The store being bound
-     * @param {Boolean} initial True if this store is being bound as initialization of the instance.
-     */
-    onBindStore: Ext.emptyFn    
-});