extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/chart/theme/Theme.js

@@ -0,0 +1,253 @@
+/**
+ * @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/extjs-rails/src/container/AbstractContainer.js

@@ -0,0 +1,1062 @@
+/**
+ * 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();
+    }
+});