Config options

A string component id or the numeric index of the component that should be initially activated within the
container's...

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 Ext.layout.CardLayout and
Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.

Animation to be used during transitions of cards. Note this only works when this container has a CardLayout.
Any valid value from Ext.anims can be used ('fade', 'slide', 'flip', 'cube', 'pop', 'wipe').
Defaults to null.

An optional extra CSS class that will be added to this component's Element (defaults to ''). ...

An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be
useful for adding customized styles to the component or any of its children using standard CSS rules.

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content
for this component.

Description :

This config option is used to take an existing HTML element and place it in the layout element
of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.

Notes :

The specified HTML element is appended to the layout element of the component after any configured
HTML has been inserted, and so the document will not contain this element at the time the render event is fired.

The specified HTML element used will not participate in any layout
scheme that the Component may use. It is just HTML. Layouts operate on child items.

Add either the x-hidden or the x-hide-display CSS class to
prevent a brief flicker of the content before it is rendered to the panel.

This option is a means of applying default settings to all added items whether added through the items
config or via ...

This option is a means of applying default settings to all added items whether added through the items
config or via the add or insert methods.

If an added item is a config object, and not an instantiated Component, then the default properties are
unconditionally applied. If the added item is an instantiated Component, then the default properties are
applied conditionally so as not to override existing properties in the item.

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 Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Usage:

defaults: { // defaults are applied to items, not the container
autoScroll:true
},
items: [
{
xtype: 'panel', // defaults do not have precedence over
id: 'panel1', // options in config objects, so the defaults
autoScroll: false // will not be applied here, panel1 will be autoScroll:false
},
new Ext.Panel({ // defaults do have precedence over options
id: 'panel2', // options in components, so the defaults
autoScroll: false // will be applied here, panel2 will be autoScroll:true.
})
]

Force the component to take up 100% width and height available. Defaults to false.
Setting this configuration immediately sets the monitorOrientation config to true.
Setting this to true will render the component instantly.

An HTML fragment, or a DomHelper specification to use as the layout element
content (defaults to ''). ...

An HTML fragment, or a DomHelper specification to use as the layout element
content (defaults to ''). The HTML content is added after the component is rendered,
so the document will not contain this HTML at the time the render event is fired.
This content is inserted into the body before any configured contentEl is appended.

the Ext.Component.xtype specified is associated with the Component
desired and should be chosen from one of the available xtypes as listed
in Ext.Component.

If an xtype is not explicitly
specified, the defaultType for that Container is used.

will be "lazily instanciated", avoiding the overhead of constructing a fully
instanciated Component object

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 doLayout call.

Set this to true to automatically relayout this component on orientation change. ...

Set this to true to automatically relayout this component on orientation change.
This property is set to true by default if a component is floating unless you specifically
set this to false. Also note that you dont have to set this property to true if this component
is a child of a fullscreen container, since fullscreen components are also laid out automatically
on orientation change.
Defaults to null

(optional) A config object containing one or more event handlers to be added to this
object during initialization. ...

(optional)

A config object containing one or more event handlers to be added to this
object during initialization. This should be a valid listeners config object as specified in the
addListener example for attaching multiple handlers at once.

is usually only done when extra value can be added. For example the DataView's
click event passing the node clicked on. To access DOM
events directly from a child element of a Component, we need to specify the element option to
identify the Component property to add a DOM listener to:

An object or array of objects that will provide custom functionality for this component. ...

An object or array of objects that will provide custom functionality for this component. The only
requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
When a component is created, if any plugins are available, the component will call the init method on each
plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the
component as needed to provide its functionality.

An object containing properties specifying DomQuery selectors which identify child elements
created by the render pro...

An object containing properties specifying DomQuery selectors which identify child elements
created by the render process.

After the Component's internal structure is rendered according to the renderTpl, this object is iterated through,
and the found Elements are added as properties to the Component using the renderSelector property name.

For example, a Component which rendered an image, and description into its element might use the following properties
coded into its prototype:

An XTemplate used to create the internal structure inside this Component's
encapsulating Element. ...

An XTemplate used to create the internal structure inside this Component's
encapsulating Element.

You do not normally need to specify this. For the base classes Ext.Component
and Ext.Container, this defaults to null which means that they will be initially rendered
with no internal structure; they render their Element empty. The more specialized ExtJS and Touch classes
which use a more complex DOM structure, provide their own template definitions.

This is intended to allow the developer to create application-specific utility Components with customized
internal structure.

Upon rendering, any created child elements may be automatically imported into object properties using the
renderSelectors option.

If the Container is already rendered when add
is called, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:

This method needs to be called whenever you change something on this component that requires the components
layout to...

This method needs to be called whenever you change something on this component that requires the components
layout to be recalculated. An example is adding, showing or hiding a docked item to a Panel, or changing the
label of a form field. After a component layout, the container layout will automatically be run. So you could
be on the safe side and always call doComponentLayout instead of doLayout.

Parameters

Fires

Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.

Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. ...

Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.

This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.

Returns

Fires

Used by ComponentQuery to retrieve all of the items
which can potentially be considered a child of this Container. ...

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

Parameters

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 Ext.Component.xtype config
property to the registered type of the Component wanted.

Returns

Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).

If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.

Parameters

Method to manage awareness of when components are removed from their
respective Container, firing an removed event. ...

Method to manage awareness of when components are removed from their
respective Container, firing an removed event. References are properly
cleaned up after removing a component from its owning container.

Allows you to set the active card in this container. This
method is only available if the container uses a CardLayout.
Note that a Carousel and TabPanel both get a CardLayout
automatically, so both of those components are able to use this method.

Available since: 1.1.0

Parameters

The card you want to be made active. A number
is interpreted as a card index. An object will be converted to a Component using the
objects xtype property, then added to the container and made active. Passing a Component
will make sure the component is a child of this container, and then make it active.

cardSwitchAnimation : String/Object (optional)

The cardSwitchAnimation used to switch between the cards.
This can be an animation type string or an animation configuration object.

Parameters

Sets the dock position of this component in its parent panel. Note that
this only has effect if this item is part of the dockedItems collection
of a parent that has a DockLayout (note that any Panel has a DockLayout
by default)

Fires

Sets the width and height of this Component. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.

Fires before this container switches the active card. This event
is only available if this container uses a CardLayout. Note that
TabPanel and Carousel both get a CardLayout by default, so both
will have this event.
A handler can return false to cancel the card switch.

Parameters

Fires after this container switches the active card. If the card
is switched using an animation, this event will fire after the
animation has finished. This event is only available if this container
uses a CardLayout. Note that TabPanel and Carousel both get a CardLayout
by default, so both will have this event.