extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/chart/theme/Theme.js

@@ -1,253 +0,0 @@
-/**
- * @class Ext.chart.theme.Theme
- * 
- * Provides chart theming.
- * 
- * Used as mixins by Ext.chart.Chart.
- */
-Ext.define('Ext.chart.theme.Theme', {
-
-    /* Begin Definitions */
-
-    requires: ['Ext.draw.Color'],
-
-    /* End Definitions */
-
-    theme: 'Base',
-    themeAttrs: false,
-    
-    initTheme: function(theme) {
-        var me = this,
-            themes = Ext.chart.theme,
-            key, gradients;
-        if (theme) {
-            theme = theme.split(':');
-            for (key in themes) {
-                if (key == theme[0]) {
-                    gradients = theme[1] == 'gradients';
-                    me.themeAttrs = new themes[key]({
-                        useGradients: gradients
-                    });
-                    if (gradients) {
-                        me.gradients = me.themeAttrs.gradients;
-                    }
-                    if (me.themeAttrs.background) {
-                        me.background = me.themeAttrs.background;
-                    }
-                    return;
-                }
-            }
-            //<debug>
-            Ext.Error.raise('No theme found named "' + theme + '"');
-            //</debug>
-        }
-    }
-}, 
-// This callback is executed right after when the class is created. This scope refers to the newly created class itself
-function() {
-   /* Theme constructor: takes either a complex object with styles like:
-  
-   {
-        axis: {
-            fill: '#000',
-            'stroke-width': 1
-        },
-        axisLabelTop: {
-            fill: '#000',
-            font: '11px Arial'
-        },
-        axisLabelLeft: {
-            fill: '#000',
-            font: '11px Arial'
-        },
-        axisLabelRight: {
-            fill: '#000',
-            font: '11px Arial'
-        },
-        axisLabelBottom: {
-            fill: '#000',
-            font: '11px Arial'
-        },
-        axisTitleTop: {
-            fill: '#000',
-            font: '11px Arial'
-        },
-        axisTitleLeft: {
-            fill: '#000',
-            font: '11px Arial'
-        },
-        axisTitleRight: {
-            fill: '#000',
-            font: '11px Arial'
-        },
-        axisTitleBottom: {
-            fill: '#000',
-            font: '11px Arial'
-        },
-        series: {
-            'stroke-width': 1
-        },
-        seriesLabel: {
-            font: '12px Arial',
-            fill: '#333'
-        },
-        marker: {
-            stroke: '#555',
-            fill: '#000',
-            radius: 3,
-            size: 3
-        },
-        seriesThemes: [{
-            fill: '#C6DBEF'
-        }, {
-            fill: '#9ECAE1'
-        }, {
-            fill: '#6BAED6'
-        }, {
-            fill: '#4292C6'
-        }, {
-            fill: '#2171B5'
-        }, {
-            fill: '#084594'
-        }],
-        markerThemes: [{
-            fill: '#084594',
-            type: 'circle' 
-        }, {
-            fill: '#2171B5',
-            type: 'cross'
-        }, {
-            fill: '#4292C6',
-            type: 'plus'
-        }]
-    }
-  
-  ...or also takes just an array of colors and creates the complex object:
-  
-  {
-      colors: ['#aaa', '#bcd', '#eee']
-  }
-  
-  ...or takes just a base color and makes a theme from it
-  
-  {
-      baseColor: '#bce'
-  }
-  
-  To create a new theme you may add it to the Themes object:
-  
-  Ext.chart.theme.MyNewTheme = Ext.extend(Object, {
-      constructor: function(config) {
-          Ext.chart.theme.call(this, config, {
-              baseColor: '#mybasecolor'
-          });
-      }
-  });
-  
-  //Proposal:
-  Ext.chart.theme.MyNewTheme = Ext.chart.createTheme('#basecolor');
-  
-  ...and then to use it provide the name of the theme (as a lower case string) in the chart config.
-  
-  {
-      theme: 'mynewtheme'
-  }
- */
-
-(function() {
-    Ext.chart.theme = function(config, base) {
-        config = config || {};
-        var i = 0, d = +new Date(), l, colors, color,
-            seriesThemes, markerThemes,
-            seriesTheme, markerTheme, 
-            key, gradients = [],
-            midColor, midL;
-        
-        if (config.baseColor) {
-            midColor = Ext.draw.Color.fromString(config.baseColor);
-            midL = midColor.getHSL()[2];
-            if (midL < 0.15) {
-                midColor = midColor.getLighter(0.3);
-            } else if (midL < 0.3) {
-                midColor = midColor.getLighter(0.15);
-            } else if (midL > 0.85) {
-                midColor = midColor.getDarker(0.3);
-            } else if (midL > 0.7) {
-                midColor = midColor.getDarker(0.15);
-            }
-            config.colors = [ midColor.getDarker(0.3).toString(),
-                              midColor.getDarker(0.15).toString(),
-                              midColor.toString(),
-                              midColor.getLighter(0.15).toString(),
-                              midColor.getLighter(0.3).toString()];
-
-            delete config.baseColor;
-        }
-        if (config.colors) {
-            colors = config.colors.slice();
-            markerThemes = base.markerThemes;
-            seriesThemes = base.seriesThemes;
-            l = colors.length;
-            base.colors = colors;
-            for (; i < l; i++) {
-                color = colors[i];
-                markerTheme = markerThemes[i] || {};
-                seriesTheme = seriesThemes[i] || {};
-                markerTheme.fill = seriesTheme.fill = markerTheme.stroke = seriesTheme.stroke = color;
-                markerThemes[i] = markerTheme;
-                seriesThemes[i] = seriesTheme;
-            }
-            base.markerThemes = markerThemes.slice(0, l);
-            base.seriesThemes = seriesThemes.slice(0, l);
-        //the user is configuring something in particular (either markers, series or pie slices)
-        }
-        for (key in base) {
-            if (key in config) {
-                if (Ext.isObject(config[key]) && Ext.isObject(base[key])) {
-                    Ext.apply(base[key], config[key]);
-                } else {
-                    base[key] = config[key];
-                }
-            }
-        }
-        if (config.useGradients) {
-            colors = base.colors || (function () {
-                var ans = [];
-                for (i = 0, seriesThemes = base.seriesThemes, l = seriesThemes.length; i < l; i++) {
-                    ans.push(seriesThemes[i].fill || seriesThemes[i].stroke);
-                }
-                return ans;
-            }());
-            for (i = 0, l = colors.length; i < l; i++) {
-                midColor = Ext.draw.Color.fromString(colors[i]);
-                if (midColor) {
-                    color = midColor.getDarker(0.1).toString();
-                    midColor = midColor.toString();
-                    key = 'theme-' + midColor.substr(1) + '-' + color.substr(1) + '-' + d;
-                    gradients.push({
-                        id: key,
-                        angle: 45,
-                        stops: {
-                            0: {
-                                color: midColor.toString()
-                            },
-                            100: {
-                                color: color.toString()
-                            }
-                        }
-                    });
-                    colors[i] = 'url(#' + key + ')'; 
-                }
-            }
-            base.gradients = gradients;
-            base.colors = colors;
-        }
-        /*
-        base.axis = Ext.apply(base.axis || {}, config.axis || {});
-        base.axisLabel = Ext.apply(base.axisLabel || {}, config.axisLabel || {});
-        base.axisTitle = Ext.apply(base.axisTitle || {}, config.axisTitle || {});
-        */
-        Ext.apply(this, base);
-    };
-}());
-});

data/app/assets/javascripts/src/container/AbstractContainer.js

@@ -1,1062 +0,0 @@
-/**
- * An abstract base class which provides shared methods for Containers across the Sencha product line.
- *
- * Please refer to sub class's documentation
- *
- * @private
- */
-Ext.define('Ext.container.AbstractContainer', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.Component',
-
-    requires: [
-        'Ext.util.MixedCollection',
-        'Ext.layout.container.Auto',
-        'Ext.ZIndexManager'
-    ],
-
-    /* End Definitions */
-
-    renderTpl: '{%this.renderContainer(out,values)%}',
-
-    /**
-     * @cfg {String/Object} layout
-     * **Important**: In order for child items to be correctly sized and
-     * positioned, typically a layout manager **must** be specified through
-     * the `layout` configuration option.
-     *
-     * The sizing and positioning of child {@link #cfg-items} is the responsibility of
-     * the Container's layout manager which creates and manages the type of layout
-     * you have in mind.  For example:
-     *
-     * If the {@link #layout} configuration is not explicitly specified for
-     * a general purpose container (e.g. Container or Panel) the
-     * {@link Ext.layout.container.Auto default layout manager} will be used
-     * which does nothing but render child components sequentially into the
-     * Container (no sizing or positioning will be performed in this situation).
-     *
-     * **layout** may be specified as either as an Object or as a String:
-     *
-     * # Specify as an Object
-     *
-     * Example usage:
-     *
-     *     layout: {
-     *         type: 'vbox',
-     *         align: 'left'
-     *     }
-     *
-     *   - **type**
-     *
-     *     The layout type to be used for this container.  If not specified,
-     *     a default {@link Ext.layout.container.Auto} will be created and used.
-     *
-     *     Valid layout <code>type</code> values are:
-     *
-     *     - {@link Ext.layout.container.Auto Auto} - **Default**
-     *     - {@link Ext.layout.container.Card card}
-     *     - {@link Ext.layout.container.Fit fit}
-     *     - {@link Ext.layout.container.HBox hbox}
-     *     - {@link Ext.layout.container.VBox vbox}
-     *     - {@link Ext.layout.container.Anchor anchor}
-     *     - {@link Ext.layout.container.Table table}
-     *
-     *   - Layout specific configuration properties
-     *
-     *     Additional layout specific configuration properties may also be
-     *     specified. For complete details regarding the valid config options for
-     *     each layout type, see the layout class corresponding to the `type`
-     *     specified.
-     *
-     * # Specify as a String
-     *
-     * Example usage:
-     *
-     *     layout: 'vbox'
-     *
-     *   - **layout**
-     *
-     *     The layout `type` to be used for this container (see list
-     *     of valid layout type values above).
-     *
-     *     Additional layout specific configuration properties. For complete
-     *     details regarding the valid config options for each layout type, see the
-     *     layout class corresponding to the `layout` specified.
-     *
-     * # Configuring the default layout type
-     *
-     *     If a certain Container class has a default layout (For example a {@link Ext.toolbar.Toolbar Toolbar}
-     *     with a default `Box` layout), then to simply configure the default layout,
-     *     use an object, but without the `type` property:
-     *
-     *
-     *     xtype: 'toolbar',
-     *     layout: {
-     *         pack: 'center'
-     *     }
-     */
-
-    /**
-     * @cfg {String/Number} activeItem
-     * A string component id or the numeric index of the component that should be
-     * initially activated within the container's layout on render.  For example,
-     * activeItem: 'item-1' or activeItem: 0 (index 0 = the first item in the
-     * container's collection).  activeItem only applies to layout styles that can
-     * display items one at a time (like {@link Ext.layout.container.Card} and
-     * {@link Ext.layout.container.Fit}).
-     */
-
-    /**
-     * @cfg {Object/Object[]} items
-     * A single item, or an array of child Components to be added to this container
-     *
-     * **Unless configured with a {@link #layout}, a Container simply renders child
-     * Components serially into its encapsulating element and performs no sizing or
-     * positioning upon them.**
-     *
-     * Example:
-     *
-     *     // specifying a single item
-     *     items: {...},
-     *     layout: 'fit',    // The single items is sized to fit
-     *      
-     *     // specifying multiple items
-     *     items: [{...}, {...}],
-     *     layout: 'hbox', // The items are arranged horizontally
-     *
-     * Each item may be:
-     *
-     * - A {@link Ext.Component Component}
-     * - A Component configuration object
-     *
-     * If a configuration object is specified, the actual type of Component to be
-     * instantiated my be indicated by using the {@link Ext.Component#xtype xtype} option.
-     *
-     * Every Component class has its own {@link Ext.Component#xtype xtype}.
-     *
-     * If an {@link Ext.Component#xtype xtype} is not explicitly specified, the
-     * {@link #defaultType} for the Container is used, which by default is usually `panel`.
-     *
-     * # Notes:
-     *
-     * Ext uses lazy rendering. Child Components will only be rendered
-     * should it become necessary. Items are automatically laid out when they are first
-     * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call.
-     *
-     * Do not specify {@link Ext.panel.Panel#contentEl contentEl} or
-     * {@link Ext.panel.Panel#html html} with `items`.
-     */
-
-    /**
-     * @cfg {Object/Function} defaults
-     * This option is a means of applying default settings to all added items whether added
-     * through the {@link #cfg-items} config or via the {@link #method-add} or {@link #insert} methods.
-     *
-     * Defaults are applied to both config objects and instantiated components conditionally
-     * so as not to override existing properties in the item (see {@link Ext#applyIf}).
-     *
-     * If the defaults option is specified as a function, then the function will be called
-     * using this Container as the scope (`this` reference) and passing the added item as
-     * the first parameter. Any resulting object from that call is then applied to the item
-     * as default properties.
-     *
-     * For example, to automatically apply padding to the body of each of a set of
-     * contained {@link Ext.panel.Panel} items, you could pass:
-     * `defaults: {bodyStyle:'padding:15px'}`.
-     *
-     * Usage:
-     *
-     *     defaults: { // defaults are applied to items, not the container
-     *         autoScroll: true
-     *     },
-     *     items: [
-     *         // default will not be applied here, panel1 will be autoScroll: false
-     *         {
-     *             xtype: 'panel',
-     *             id: 'panel1',
-     *             autoScroll: false
-     *         },
-     *         // this component will have autoScroll: true
-     *         new Ext.panel.Panel({
-     *             id: 'panel2'
-     *         })
-     *     ]
-     */
-
-    /**
-     * @cfg {Boolean} suspendLayout
-     * If true, suspend calls to doLayout. Useful when batching multiple adds to a container
-     * and not passing them as multiple arguments or an array.
-     */
-    suspendLayout : false,
-
-    /**
-     * @cfg {Boolean} [autoDestroy=true]
-     * If true the container will automatically destroy any contained component that is removed
-     * from it, else destruction must be handled manually.
-     */
-    autoDestroy : true,
-
-     /**
-      * @cfg {String} [defaultType="panel"]
-      * The default {@link Ext.Component xtype} of child Components to create in this Container when
-      * a child item is specified as a raw configuration object, rather than as an instantiated Component.
-      */
-    defaultType: 'panel',
-    
-    /**
-     * @cfg {Boolean} [detachOnRemove=true]
-     * True to move any component to the {@link Ext#getDetachedBody detachedBody} when the component is
-     * removed from this container. This option is only applicable when the component is not destroyed while
-     * being removed, see {@link #autoDestroy} and {@link #method-remove}. If this option is set to false, the DOM
-     * of the component will remain in the current place until it is explicitly moved.
-     */
-    detachOnRemove: true,
-
-    /*
-     * @property {Boolean} isContainer
-     * `true` in this class to identify an object as an instantiated Container, or subclass thereof.
-     */
-    isContainer : true,
-
-    /**
-     * @property {Number} layoutCounter
-     * The number of container layout calls made on this object.
-     * @private
-     */
-    layoutCounter : 0,
-
-    baseCls: Ext.baseCSSPrefix + 'container',
-
-    /**
-     * @cfg {String[]} bubbleEvents
-     * An array of events that, when fired, should be bubbled to any parent container.
-     * See {@link Ext.util.Observable#enableBubble}.
-     */
-    bubbleEvents: ['add', 'remove'],
-
-    // @private
-    initComponent : function(){
-        var me = this;
-        me.addEvents(
-            /**
-             * @event afterlayout
-             * Fires when the components in this container are arranged by the associated layout manager.
-             * @param {Ext.container.Container} this
-             * @param {Ext.layout.container.Container} layout The ContainerLayout implementation for this container
-             */
-            'afterlayout',
-            /**
-             * @event beforeadd
-             * Fires before any {@link Ext.Component} is added or inserted into the container.
-             * A handler can return false to cancel the add.
-             * @param {Ext.container.Container} this
-             * @param {Ext.Component} component The component being added
-             * @param {Number} index The index at which the component will be added to the container's items collection
-             */
-            'beforeadd',
-            /**
-             * @event beforeremove
-             * Fires before any {@link Ext.Component} is removed from the container.  A handler can return
-             * false to cancel the remove.
-             * @param {Ext.container.Container} this
-             * @param {Ext.Component} component The component being removed
-             */
-            'beforeremove',
-            /**
-             * @event add
-             * Fires after any {@link Ext.Component} is added or inserted into the container.
-             * 
-             * **This event bubbles:** 'add' will also be fired when Component is added to any of
-             * the child containers or their childern or ...
-             * @param {Ext.container.Container} this
-             * @param {Ext.Component} component The component that was added
-             * @param {Number} index The index at which the component was added to the container's items collection
-             */
-            'add',
-            /**
-             * @event remove
-             * Fires after any {@link Ext.Component} is removed from the container.
-             *
-             * **This event bubbles:** 'remove' will also be fired when Component is removed from any of
-             * the child containers or their children or ...
-             * @param {Ext.container.Container} this
-             * @param {Ext.Component} component The component that was removed
-             */
-            'remove'
-        );
-
-        me.callParent();
-
-        me.getLayout();
-        me.initItems();
-    },
-
-    // @private
-    initItems : function() {
-        var me = this,
-            items = me.items;
-
-        /**
-         * The MixedCollection containing all the child items of this container.
-         * @property items
-         * @type Ext.util.AbstractMixedCollection
-         */
-        me.items = new Ext.util.AbstractMixedCollection(false, me.getComponentId);
-
-        if (items) {
-            if (!Ext.isArray(items)) {
-                items = [items];
-            }
-
-            me.add(items);
-        }
-    },
-
-    /**
-     * @private
-     * Returns the focus holder element associated with this Container. By default, this is the Container's target
-     * element. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use
-     * by the {@link #method-focus} method.
-     * @returns {Ext.Element} the focus holding element.
-     */
-    getFocusEl: function() {
-        return this.getTargetEl();
-    },
-
-    finishRenderChildren: function () {
-        this.callParent();
-
-        var layout = this.getLayout();
-
-        if (layout) {
-            layout.finishRender();
-        }
-    },
-
-    beforeRender: function () {
-        var me = this,
-            layout = me.getLayout();
-
-        me.callParent();
-
-        if (!layout.initialized) {
-            layout.initLayout();
-        }
-    },
-
-    setupRenderTpl: function (renderTpl) {
-        var layout = this.getLayout();
-
-        this.callParent(arguments);
-
-        layout.setupRenderTpl(renderTpl);
-    },
-
-    // @private
-    setLayout : function(layout) {
-        var currentLayout = this.layout;
-
-        if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
-            currentLayout.setOwner(null);
-        }
-
-        this.layout = layout;
-        layout.setOwner(this);
-    },
-
-    /**
-     * Returns the {@link Ext.layout.container.Container layout} instance currently associated with this Container.
-     * If a layout has not been instantiated yet, that is done first
-     * @return {Ext.layout.container.Container} The layout
-     */
-    getLayout : function() {
-        var me = this;
-        if (!me.layout || !me.layout.isLayout) {
-            // Pass any configured in layout property, defaulting to the prototype's layout property, falling back to Auto.
-            me.setLayout(Ext.layout.Layout.create(me.layout, me.self.prototype.layout || 'autocontainer'));
-        }
-
-        return me.layout;
-    },
-
-    /**
-     * Manually force this container's layout to be recalculated. The framework uses this internally to refresh layouts
-     * form most cases.
-     * @return {Ext.container.Container} this
-     */
-    doLayout : function() {
-        this.updateLayout();
-        return this;
-    },
-
-    /**
-     * Invoked after the Container has laid out (and rendered if necessary)
-     * its child Components.
-     *
-     * @param {Ext.layout.container.Container} layout
-     *
-     * @template
-     * @protected
-     */
-    afterLayout : function(layout) {
-        var me = this;
-        ++me.layoutCounter;
-        if (me.hasListeners.afterlayout) {
-            me.fireEvent('afterlayout', me, layout);
-        }
-    },
-
-    // @private
-    prepareItems : function(items, applyDefaults) {
-        // Create an Array which does not refer to the passed array.
-        // The passed array is a reference to a user's config object and MUST NOT be mutated.
-        if (Ext.isArray(items)) {
-            items = items.slice();
-        } else {
-            items = [items];
-        }
-
-        // Make sure defaults are applied and item is initialized
-        var i = 0,
-            len = items.length,
-            item;
-
-        for (; i < len; i++) {
-            item = items[i];
-            if (item == null) {
-                Ext.Array.erase(items, i, 1);
-                --i;
-                --len;
-            } else {
-                if (applyDefaults) {
-                    item = this.applyDefaults(item);
-                }
-                items[i] = this.lookupComponent(item);
-            }
-        }
-
-        return items;
-    },
-
-    // @private
-    applyDefaults : function(config) {
-        var defaults = this.defaults;
-
-        if (defaults) {
-            if (Ext.isFunction(defaults)) {
-                defaults = defaults.call(this, config);
-            }
-
-            if (Ext.isString(config)) {
-                config = Ext.ComponentManager.get(config);
-            }
-            Ext.applyIf(config, defaults);
-        }
-        return config;
-    },
-
-    // @private
-    lookupComponent : function(comp) {
-        return (typeof comp == 'string') ? Ext.ComponentManager.get(comp)
-                                         : Ext.ComponentManager.create(comp, this.defaultType);
-    },
-
-    // @private - used as the key lookup function for the items collection
-    getComponentId : function(comp) {
-        return comp.getItemId();
-    },
-
-    /**
-     * Adds {@link Ext.Component Component}(s) to this Container.
-     *
-     * ## Description:
-     *
-     * - Fires the {@link #beforeadd} event before adding.
-     * - The Container's {@link #defaults default config values} will be applied
-     *   accordingly (see `{@link #defaults}` for details).
-     * - Fires the `{@link #event-add}` event after the component has been added.
-     *
-     * ## Notes:
-     *
-     * If the Container is __already rendered__ when `add`
-     * is called, it will render the newly added Component into its content area.
-     *
-     * **If** the Container was configured with a size-managing {@link #layout} manager,
-     * the Container will recalculate its internal layout at this time too.
-     *  
-     * Note that the default layout manager simply renders child Components sequentially
-     * into the content area and thereafter performs no sizing.
-     *  
-     * If adding multiple new child Components, pass them as an array to the `add` method,
-     * so that only one layout recalculation is performed.
-     *  
-     *     tb = new {@link Ext.toolbar.Toolbar}({
-     *         renderTo: document.body
-     *     });  // toolbar is rendered
-     *     // add multiple items.
-     *     // ({@link #defaultType} for {@link Ext.toolbar.Toolbar Toolbar} is 'button')
-     *     tb.add([{text:'Button 1'}, {text:'Button 2'}]);
-     *
-     * To inject components between existing ones, use the {@link #insert} method.
-     *
-     * ## Warning:
-     *
-     * Components directly managed by the BorderLayout layout manager may not be removed
-     * or added.  See the Notes for {@link Ext.layout.container.Border BorderLayout} for
-     * more details.
-     *
-     * @param {Ext.Component[]/Ext.Component...} component
-     * Either one or more Components to add or an Array of Components to add.
-     * See `{@link #cfg-items}` for additional information.
-     *
-     * @return {Ext.Component[]/Ext.Component} The Components that were added.
-     */
-    add : function() {
-        var me = this,
-            args = Ext.Array.slice(arguments),
-            index = (typeof args[0] == 'number') ? args.shift() : -1,
-            layout = me.getLayout(),
-            addingArray, items, i, length, item, pos, ret;
-
-        if (args.length == 1 && Ext.isArray(args[0])) {
-            items = args[0];
-            addingArray = true;
-        } else {
-            items = args;
-        }
-
-        ret = items = me.prepareItems(items, true);
-        length = items.length;
-
-        if (me.rendered) {
-            Ext.suspendLayouts(); // suspend layouts while adding items...
-        }
-
-        if (!addingArray && length == 1) { // an array of 1 should still return an array...
-            ret = items[0];
-        }
-
-        // loop
-        for (i = 0; i < length; i++) {
-            item = items[i];
-            //<debug>
-            if (!item) {
-                Ext.Error.raise("Cannot add null item to Container with itemId/id: " + me.getItemId());
-            }
-            //</debug>
-
-            pos = (index < 0) ? me.items.length : (index + i);
-
-            // Floating Components are not added into the items collection
-            // But they do get an upward ownerCt link so that they can traverse
-            // up to their z-index parent.
-            if (item.floating) {
-                item.onAdded(me, pos);
-            } else if ((!me.hasListeners.beforeadd || me.fireEvent('beforeadd', me, item, pos) !== false) && me.onBeforeAdd(item) !== false) {
-                me.items.insert(pos, item);
-                item.onAdded(me, pos);
-                me.onAdd(item, pos);
-                layout.onAdd(item, pos);
-
-                if (me.hasListeners.add) {
-                    me.fireEvent('add', me, item, pos);
-                }
-            }
-        }
-
-        // We need to update our layout after adding all passed items
-        me.updateLayout();
-        if (me.rendered) {
-            Ext.resumeLayouts(true);
-        }
-
-        return ret;
-    },
-
-    /**
-     * This method is invoked after a new Component has been added. It
-     * is passed the Component which has been added. This method may
-     * be used to update any internal structure which may depend upon
-     * the state of the child items.
-     *
-     * @param {Ext.Component} component
-     * @param {Number} position
-     *
-     * @template
-     * @protected
-     */
-    onAdd : Ext.emptyFn,
-
-    /**
-     * This method is invoked after a new Component has been
-     * removed. It is passed the Component which has been
-     * removed. This method may be used to update any internal
-     * structure which may depend upon the state of the child items.
-     *
-     * @param {Ext.Component} component
-     * @param {Boolean} autoDestroy
-     *
-     * @template
-     * @protected
-     */
-    onRemove : Ext.emptyFn,
-
-    /**
-     * Inserts a Component into this Container at a specified index. Fires the
-     * {@link #beforeadd} event before inserting, then fires the {@link #event-add}
-     * event after the Component has been inserted.
-     *
-     * @param {Number} index The index at which the Component will be inserted
-     * into the Container's items collection
-     *
-     * @param {Ext.Component} component The child Component to insert.
-     *
-     * Ext uses lazy rendering, and will only render the inserted Component should
-     * it become necessary.
-     *
-     * A Component config object may be passed in order to avoid the overhead of
-     * constructing a real Component object if lazy rendering might mean that the
-     * inserted Component will not be rendered immediately. To take advantage of
-     * this 'lazy instantiation', set the {@link Ext.Component#xtype} config
-     * property to the registered type of the Component wanted.
-     *
-     * For a list of all available xtypes, see {@link Ext.Component}.
-     *
-     * @return {Ext.Component} component The Component (or config object) that was
-     * inserted with the Container's default config values applied.
-     */
-    insert : function(index, comp) {
-        return this.add(index, comp);
-    },
-
-    /**
-     * Moves a Component within the Container
-     * @param {Number} fromIdx The index the Component you wish to move is currently at.
-     * @param {Number} toIdx The new index for the Component.
-     * @return {Ext.Component} component The Component (or config object) that was moved.
-     */
-    move : function(fromIdx, toIdx) {
-        var items = this.items,
-            item;
-        item = items.removeAt(fromIdx);
-        if (item === false) {
-            return false;
-        }
-        items.insert(toIdx, item);
-        this.doLayout();
-        return item;
-    },
-
-    /**
-     * This method is invoked before adding a new child Component. It
-     * is passed the new Component, and may be used to modify the
-     * Component, or prepare the Container in some way. Returning
-     * false aborts the add operation.
-     *
-     * @param {Ext.Component} item
-     *
-     * @template
-     * @protected
-     */
-    onBeforeAdd : function(item) {
-        var me = this,
-            border = item.border;
-
-        if (item.ownerCt) {
-            item.ownerCt.remove(item, false);
-        }
-
-        if (me.border === false || me.border === 0) {
-            // If the parent has no border, only use an explicitly defined border
-            item.border = Ext.isDefined(border) && border !== false && border !== 0;
-        }
-    },
-
-    /**
-     * Removes a component from this container.  Fires the {@link #beforeremove} event
-     * before removing, then fires the {@link #event-remove} event after the component has
-     * been removed.
-     *
-     * @param {Ext.Component/String} component The component reference or id to remove.
-     *
-     * @param {Boolean} [autoDestroy] True to automatically invoke the removed Component's
-     * {@link Ext.Component#method-destroy} function.
-     *
-     * Defaults to the value of this Container's {@link #autoDestroy} config.
-     *
-     * @return {Ext.Component} component The Component that was removed.
-     */
-    remove : function(comp, autoDestroy) {
-        var me = this,
-            c = me.getComponent(comp);
-        //<debug>
-            if (Ext.isDefined(Ext.global.console) && !c) {
-                Ext.global.console.warn("Attempted to remove a component that does not exist. Ext.container.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.");
-            }
-        //</debug>
-
-        if (c && (!me.hasListeners.beforeremove || me.fireEvent('beforeremove', me, c) !== false)) {
-            me.doRemove(c, autoDestroy);
-            if (me.hasListeners.remove) {
-                me.fireEvent('remove', me, c);
-            }
-
-            if (!me.destroying) {
-                me.doLayout();
-            }
-        }
-
-        return c;
-    },
-
-    // @private
-    doRemove : function(component, autoDestroy) {
-        var me = this,
-            layout = me.layout,
-            hasLayout = layout && me.rendered,
-            destroying = autoDestroy === true || (autoDestroy !== false && me.autoDestroy);
-
-        autoDestroy = autoDestroy === true || (autoDestroy !== false && me.autoDestroy);
-        me.items.remove(component);
-        component.onRemoved(destroying);
-
-        if (hasLayout) {
-            layout.onRemove(component);
-        }
-
-        me.onRemove(component, destroying);
-
-        // Destroy if we were explicitly told to, or we're defaulting to our autoDestroy configuration
-        if (destroying) {
-            component.destroy();
-        }
-        // Only have the layout perform remove postprocessing if the Component is not being destroyed
-        else {
-            if (hasLayout) {
-                layout.afterRemove(component);       
-            }
-            if (me.detachOnRemove && component.rendered) {
-                Ext.getDetachedBody().appendChild(component.getEl());
-            }
-        }
-    },
-
-    /**
-     * Removes all components from this container.
-     * @param {Boolean} [autoDestroy] True to automatically invoke the removed
-     * Component's {@link Ext.Component#method-destroy} function.
-     * Defaults to the value of this Container's {@link #autoDestroy} config.
-     * @return {Ext.Component[]} Array of the removed components
-     */
-    removeAll : function(autoDestroy) {
-        var me = this,
-            removeItems = me.items.items.slice(),
-            items = [],
-            i = 0,
-            len = removeItems.length,
-            item;
-
-        // Suspend Layouts while we remove multiple items from the container
-        me.suspendLayouts();
-        for (; i < len; i++) {
-            item = removeItems[i];
-            me.remove(item, autoDestroy);
-
-            if (item.ownerCt !== me) {
-                items.push(item);
-            }
-        }
-
-        // Resume Layouts now that all items have been removed and do a single layout (if we removed anything!)
-        me.resumeLayouts(!!len);
-        return items;
-    },
-
-    // Used by ComponentQuery to retrieve all of the items
-    // which can potentially be considered a child of this Container.
-    // This should be overriden by components which have child items
-    // that are not contained in items. For example dockedItems, menu, etc
-    // IMPORTANT note for maintainers:
-    //  Items are returned in tree traversal order. Each item is appended to the result array
-    //  followed by the results of that child's getRefItems call.
-    //  Floating child items are appended after internal child items.
-    getRefItems : function(deep) {
-        var me = this,
-            items = me.items.items,
-            len = items.length,
-            i = 0,
-            item,
-            result = [];
-
-        for (; i < len; i++) {
-            item = items[i];
-            result.push(item);
-            if (deep && item.getRefItems) {
-                result.push.apply(result, item.getRefItems(true));
-            }
-        }
-
-        // Append floating items to the list.
-        // These will only be present after they are rendered.
-        if (me.floatingItems && me.floatingItems.accessList) {
-            result.push.apply(result, me.floatingItems.accessList);
-        }
-
-        return result;
-    },
-
-    /**
-     * Cascades down the component/container heirarchy from this component (passed in
-     * the first call), calling the specified function with each component. The scope
-     * (this reference) of the function call will be the scope provided or the current
-     * component. The arguments to the function will be the args provided or the current
-     * component. If the function returns false at any point, the cascade is stopped on
-     * that branch.
-     * @param {Function} fn The function to call
-     * @param {Object} [scope] The scope of the function (defaults to current component)
-     * @param {Array} [args] The args to call the function with. The current component
-     * always passed as the last argument.
-     * @return {Ext.Container} this
-     */
-    cascade : function(fn, scope, origArgs){
-        var me = this,
-            cs = me.items ? me.items.items : [],
-            len = cs.length,
-            i = 0,
-            c,
-            args = origArgs ? origArgs.concat(me) : [me],
-            componentIndex = args.length - 1;
-
-        if (fn.apply(scope || me, args) !== false) {
-            for (; i < len; i++){
-                c = cs[i];
-                if (c.cascade) {
-                    c.cascade(fn, scope, origArgs);
-                } else {
-                    args[componentIndex] = c;
-                    fn.apply(scope || cs, args);
-                }
-            }
-        }
-        return this;
-    },
-
-    /**
-     * Determines whether **this Container** is an ancestor of the passed Component.
-     * This will return `true` if the passed Component is anywhere within the subtree
-     * beneath this Container.
-     * @param {Ext.Component} possibleDescendant The Component to test for presence
-     * within this Container's subtree.
-     */
-    isAncestor: function(possibleDescendant) {
-        while (possibleDescendant) {
-            if (possibleDescendant.ownerCt === this) {
-                return true;
-            }
-            possibleDescendant = possibleDescendant.ownerCt;
-        }
-    },
-
-    /**
-     * Examines this container's {@link #property-items} **property** and gets a direct child
-     * component of this container.
-     *
-     * @param {String/Number} comp This parameter may be any of the following:
-     *
-     * - a **String** : representing the {@link Ext.Component#itemId itemId}
-     *   or {@link Ext.Component#id id} of the child component.
-     * - a **Number** : representing the position of the child component
-     *   within the {@link #property-items} **property**
-     *
-     * For additional information see {@link Ext.util.MixedCollection#get}.
-     *
-     * @return Ext.Component The component (if found).
-     */
-    getComponent : function(comp) {
-        if (Ext.isObject(comp)) {
-            comp = comp.getItemId();
-        }
-
-        return this.items.get(comp);
-    },
-
-    /**
-     * Retrieves all descendant components which match the passed selector.
-     * Executes an Ext.ComponentQuery.query using this container as its root.
-     * @param {String} [selector] Selector complying to an Ext.ComponentQuery selector.
-     * If no selector is specified all items will be returned.
-     * @return {Ext.Component[]} Components which matched the selector
-     */
-    query : function(selector) {
-        selector = selector || '*';
-        return Ext.ComponentQuery.query(selector, this);
-    },
-    
-    /**
-     * Retrieves all descendant components which match the passed function.
-     * The function should return false for components that are to be
-     * excluded from the selection.
-     * @param {Function} fn The matcher function. It will be called with a single argument,
-     * the component being tested.
-     * @param {Object} [scope] The scope in which to run the function. If not specified,
-     * it will default to the active component.
-     * @return {Ext.Component[]} Components matched by the passed function
-     */
-    queryBy: function(fn, scope) {
-        var out = [],
-            items = this.getRefItems(true),
-            i = 0,
-            len = items.length,
-            item;
-            
-        for (; i < len; ++i) {
-            item = items[i];
-            if (fn.call(scope || item, item) !== false) {
-                out.push(item);
-            }
-        }
-        return out;
-    },
-    
-    /**
-     * Finds a component at any level under this container matching the id/itemId.
-     * This is a shorthand for calling ct.down('#' + id);
-     * @param {String} id The id to find
-     * @return {Ext.Component} The matching id, null if not found
-     */
-    queryById: function(id){
-        return this.down('#' + id);
-    },
-
-    /**
-     * Retrieves the first direct child of this container which matches the passed selector.
-     * The passed in selector must comply with an Ext.ComponentQuery selector.
-     * @param {String} [selector] An Ext.ComponentQuery selector. If no selector is
-     * specified, the first child will be returned.
-     * @return Ext.Component
-     */
-    child : function(selector) {
-        selector = selector || '';
-        return this.query('> ' + selector)[0] || null;
-    },
-
-    nextChild: function(child, selector) {
-        var me = this,
-            result,
-            childIndex = me.items.indexOf(child);
-
-        if (childIndex !== -1) {
-            result = selector ? Ext.ComponentQuery(selector, me.items.items.slice(childIndex + 1)) : me.items.getAt(childIndex + 1);
-            if (!result && me.ownerCt) {
-                result = me.ownerCt.nextChild(me, selector);
-            }
-        }
-        return result;
-    },
-
-    prevChild: function(child, selector) {
-        var me = this,
-            result,
-            childIndex = me.items.indexOf(child);
-
-        if (childIndex !== -1) {
-            result = selector ? Ext.ComponentQuery(selector, me.items.items.slice(childIndex + 1)) : me.items.getAt(childIndex + 1);
-            if (!result && me.ownerCt) {
-                result = me.ownerCt.nextChild(me, selector);
-            }
-        }
-        return result;
-    },
-
-    /**
-     * Retrieves the first descendant of this container which matches the passed selector.
-     * The passed in selector must comply with an Ext.ComponentQuery selector.
-     * @param {String} [selector] An Ext.ComponentQuery selector. If no selector is
-     * specified, the first child will be returned.
-     * @return Ext.Component
-     */
-    down : function(selector) {
-        return this.query(selector)[0] || null;
-    },
-
-    // @private
-    // Enable all immediate children that was previously disabled
-    // Override enable because onEnable only gets called when rendered
-    enable: function() {
-        this.callParent(arguments);
-
-        var itemsToDisable = this.getChildItemsToDisable(),
-            length         = itemsToDisable.length,
-            item, i;
-
-        for (i = 0; i < length; i++) {
-            item = itemsToDisable[i];
-
-            if (item.resetDisable) {
-                item.enable();
-            }
-        }
-    },
-
-    // Inherit docs
-    // Disable all immediate children that was previously disabled
-    // Override disable because onDisable only gets called when rendered
-    disable: function() {
-        this.callParent(arguments);
-
-        var itemsToDisable = this.getChildItemsToDisable(),
-            length         = itemsToDisable.length,
-            item, i;
-
-        for (i = 0; i < length; i++) {
-            item = itemsToDisable[i];
-
-            if (item.resetDisable !== false && !item.disabled) {
-                item.disable();
-                item.resetDisable = true;
-            }
-        }
-    },
-    
-    /**
-     * Gets a list of child components to enable/disable when the container is
-     * enabled/disabled
-     * @private
-     * @return {Ext.Component[]} Items to be enabled/disabled
-     */
-    getChildItemsToDisable: function(){
-        return this.query('[isFormField],button');
-    },
-
-    /**
-     * Occurs before componentLayout is run. Returning false from this method
-     * will prevent the containerLayout from being executed.
-     *
-     * @template
-     * @protected
-     */
-    beforeLayout: function() {
-        return true;
-    },
-
-    // @private
-    beforeDestroy : function() {
-        var me = this,
-            items = me.items,
-            c;
-
-        if (items) {
-            while ((c = items.first())) {
-                me.doRemove(c, true);
-            }
-        }
-
-        Ext.destroy(
-            me.layout
-        );
-        me.callParent();
-    }
-});