/**
 * @class Ext.Container
 * @extend Ext.Component
 * @alternateClassName Ext.lib.Container
 * @alternateClassName Ext.container.Container
 * @mixin Ext.mixin.Queryable
 * @mixin Ext.mixin.Container
 * @mixin Ext.mixin.FocusableContainer
 * @xtype container
 *
 * A Container has all of the abilities of {@link Ext.Component Component}, but lets you nest other Components inside
 * it. Applications are made up of lots of components, usually nested inside one another. Containers allow you to
 * render and arrange child Components inside them.
 *
 * Most apps have a single top-level Container called a Viewport,
 * which takes up the entire screen. Inside of this are child components, for example in a mail app the Viewport
 * Container's two children might be a message List and an email preview pane.
 *
 * Containers give the following extra functionality:
 *
 * - Adding child Components at instantiation and run time
 * - Removing child Components
 * - Specifying a Layout
 *
 * Layouts determine how the child Components should be laid out on the screen. In our mail app example we'd use an
 * HBox layout so that we can pin the email list to the left hand edge of the screen and allow the preview pane to
 * occupy the rest. There are several layouts, each of which help you achieve your desired
 * application structure.
 */
 
/**
 * @cfg {Boolean} [autoSize=true]
 * May be set to `false` for improved layout performance if auto-sizing is not required.
 *
 * Some versions of Safari, both desktop and mobile, have very slow performance
 * if the application has deeply nested containers due to the following WebKit
 * bug: https://bugs.webkit.org/show_bug.cgi?id=150445
 *
 * Applications that experience performance issues in the affected versions of
 * Safari may need to turn off autoSizing globally for all `Ext.Container` instances
 * by placing the following override in the application's "overrides" directory:
 *
 *     Ext.define('MyApp.overrides.Container', {
 *         override: 'Ext.Container',
 *         config: {
 *             autoSize: false
 *         }
 *     });
 *
 * Once auto-sizing support has turned off by default, it can be selectively
 * turned back on only on those container instances that explicitly need auto-sizing
 * behavior by setting `autoSize` to `true`.
 *
 * This option can also be used to allow children to be sized in percentage
 * units as a workaround for the following browser bug:
 * https://bugs.webkit.org/show_bug.cgi?id=137730
 *
 * To illustrate, the following example should render a 200px by 200px green box
 * (the container) with a yellow box inside of it (the child item).  The child
 * item's height and width are both set to `'50%'` so the child should render
 * exactly 100px by 100px in size.
 *
 *     <Container
 *         height={200}
 *         width={200}
 *         style="background: green"
 *     >
 *         <Component
 *             style="background: yellow"
 *             height="50%"
 *             width="50%"
 *         />
 *     </Container>
 *
 * All browsers except for Safari render the previous example correctly, but
 * Safari does not assign a height to the component.  To make percentage-sized
 * children work in Safari, simply set `autoSize` to `false` on the container.
 *
 * Since the underlying implementation works by absolutely positioning the container's
 * body element, this option can only be used when the container is not
 * "shrink wrapping" the content in either direction.  When `autoSize` is
 * set to `false`, shrink wrapped dimension(s) will collapse to 0.
 * @accessor
 */
 
/**
 * @cfg {Object} [defaults=null]
 * A set of default configurations to apply to all child Components in this Container.
 *
 * It's often useful to specify defaults when creating more than one children with similar configurations. For
 * example here we can specify that each child has a height of 20px and avoid repeating the declaration for each
 * one:
 *
 *     <Container
 *         fullscreen
 *         defaults={{
 *             height: 20
 *         }}
 *     >
 *         <Panel>Panel 1</Panel>
 *         <Panel>Panel 2</Panel>
 *     </Container>
 *
 * @accessor
 */
 
/**
 * @cfg {Boolean} [autoDestroy=true]
 * If `true`, children will be destroyed as soon as they are {@link #method-remove removed}
 * from this container.
 * @accessor
 */
 
/** @cfg {String} [defaultType='container']
 * 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.
 * @accessor
 */
 
/**
 * @cfg {String} [defaultFocus=null]
 *
 * Specifies a child Component to receive focus when this Container's {@link #method-focus}
 * method is called. Should be a valid {@link Ext.ComponentQuery query} selector.
 * @accessor
 */
 
/**
 * @cfg {Boolean/Object/Ext.Mask/Ext.LoadMask} [masked=null]
 * A configuration to allow you to mask this container.
 * You can optionally pass an object block with and xtype of `loadmask`, and an optional `message` value to
 * display a loading mask. Please refer to the {@link Ext.LoadMask} component to see other configurations.
 *
 *     <Container
 *         html="Hello World"
 *         masked={{
 *             xtype: "loadmask",
 *             message: "My Message"
 *         }}
 *     />
 *
 * Alternatively, you can just call the setter at any time with `true`/`false` to show/hide the mask:
 *
 *     setMasked(true); //show the mask
 *     setMasked(false); //hides the mask
 *
 * There are also two convenient methods, {@link #method-mask} and {@link #unmask}, to allow you to mask and unmask
 * this container at any time.
 *
 * @accessor
 */
 
/**
 * @cfg {Object/String} [layout='auto']
 * Configuration for this Container's layout. Example:
 *
 *     <Container
 *         layout={{
 *             type: "hbox",
 *             align: "middle"
 *         }}
 *     >
 *         <Panel
 *             html="hello"
 *             flex={1}
 *             bodyStyle={{
 *                 background: "#000",
 *                 color: "#fff"
 *             }}
 *         />
 *         <Panel
 *             html="world"
 *             flex={2}
 *             bodyStyle={{
 *                 background: "#f00",
 *                 color: "#fff"
 *             }}
 *         />
 *     </Container>
 *
 * @accessor
 */
 
/**
 * @cfg {Object} [control=null]
 * Enables you to easily control Components inside this Container by listening to their
 * events and taking some action. For example, if we had a container with a nested Disable button, and we
 * wanted to hide the Container when the Disable button is tapped, we could do this:
 *
 *     @example
 *     Ext.create({
 *         xtype: 'container',
 *         control: {
 *            'button[text=Disable]': {
 *                tap: 'hideMe'
 *            }
 *         },
 *
 *         hideMe: function () {
 *             this.hide();
 *         }
 *     });
 *
 * We used a {@link Ext.ComponentQuery} selector to listen to the {@link Ext.Button#tap tap} event on any
 * {@link Ext.Button button} anywhere inside the Container that has the {@link Ext.Button#text text} 'Disable'.
 * Whenever a Component matching that selector fires the `tap` event our `hideMe` function is called. `hideMe` is
 * called with scope: `this` (e.g. `this` is the Container instance).
 * @accessor
 */
 
/**
 * @cfg {Boolean} [manageBorders=false]
 * @protected
 * `true` to enable border management of docked items.  When enabled, borders of docked
 * items will collapse where they meet to avoid duplicated borders.
 */
 
/**
 * @cfg {Array/Object} [items=null]
 * The child items to add to this Container. This is usually an array of Component
 * configurations or instances, for example:
 *
 *     @example
 *     Ext.create({
 *         xtype: 'container',
 *         items: [{
 *             xtype: 'panel',
 *             html: 'This is an item'
 *         }]
 *     });
 *
 * This may also be specified as an object, the property names of which are `itemId`s, and the property values
 * are child Component config objects, for example:
 *
 *     @example
 *     Ext.create({
 *         xtype: 'tabpanel',
 *         items: {
 *             panel1: {
 *                 xtype: 'panel',
 *                 title: 'First panel'
 *             },
 *             panel2: {
 *                 xtype: 'panel',
 *                 title: 'Second panel'
 *             }
 *         }
 *     });
 *
 * @accessor
 */
 
/**
 * @cfg {String} [innerCls=null]
 * A string to add to the immediate parent element of the inner items of this
 * container. That is, items that are not `docked`, `positioned` or `floated`. In
 * some containers, `positioned` items may be in this same element.
 * @since 6.5.0
 * @accessor
 */
 
/**
 * @cfg {Object/String/Number} [activeItem=0] The item from the {@link #cfg-items} collection that will be active first. This is
 * usually only meaningful in a {@link Ext.layout.Card card layout}, where only one item can be active at a
 * time. If passes a string, it will be assumed to be a {@link Ext.ComponentQuery} selector.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Boolean} [weighted=false]
 * If set to `true`, then child {@link #cfg!items} may be specified as a object,
 * with each property name specifying an {@link #cfg!itemId}, and the property
 * value being the child item configuration object.
 *
 * When using this scheme, each child item may contain a {@link #cfg!weight}
 * configuration value which affects its order in this container. Lower weights
 * are towards the start, higher weights towards the end.
 */
 
/**
 * @event add
 * Fires whenever item added to the Container.
 * @param {Ext.Container} this The Container instance.
 * @param {Object} item The item added to the Container.
 * @param {Number} index The index of the item within the Container.
 */
 
/**
 * @event remove
 * Fires whenever item removed from the Container.
 * @param {Ext.Container} this The Container instance.
 * @param {Object} item The item removed from the Container.
 * @param {Number} index The index of the item that was removed.
 */
 
/**
 * @event move
 * Fires whenever item moved within the Container.
 * @param {Ext.Container} this The Container instance.
 * @param {Object} item The item moved within the Container.
 * @param {Number} toIndex The new index of the item.
 * @param {Number} fromIndex The old index of the item.
 */
 
/**
 * @event activate
 * Fires whenever item within the Container is activated.
 * @param {Object} newActiveItem The new active item within the container.
 * @param {Ext.Container} this The Container instance.
 * @param {Object} oldActiveItem The old active item within the container.
 */
 
/**
 * @event deactivate
 * Fires whenever item within the Container is deactivated.
 * @param {Object} oldActiveItem The old active item within the container.
 * @param {Ext.Container} this The Container instance.
 * @param {Object} newActiveItem The new active item within the container.
 */