/** * @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. */