Clear Up
SharpKit Reference

AbstractContainer Class

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

An abstract base class which provides shared methods for Containers across the Sencha product line.

Please refer to sub class's documentation

Namespace: Ext.container

Derived Types

Fields

Name Description
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 Ext.layout.container.Card and Ext.layout.container.Fit).
autoDestroy If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually. Defaults to: true
bubbleEvents An array of events that, when fired, should be bubbled to any parent container. See Ext.util.Observable.enableBubble. Defaults to: ["add", "remove"]
defaults 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. Defaults are applied to both config objects and instantiated components conditionally so as not to override existing properties in the item (see 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 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'
            })
            ]
            
defaultType The default 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. Defaults to: "panel"
detachOnRemove True to move any component to the detachedBody when the component is removed from this container. This option is only applicable when the component is not destroyed while being removed, see autoDestroy and remove. If this option is set to false, the DOM of the component will remain in the current place until it is explicitly moved. Defaults to: true
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 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 layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the 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 Ext.layout.container.Auto will be created and used.

    Valid layout type values are:

    • Auto - Default
    • card
    • fit
    • hbox
    • vbox
    • anchor
    • 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 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'
                }
                
    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. Defaults to: false

    Methods

    Name Description
    add(Object[]) Adds Component(s) to this Container. Description:
  • Fires the beforeadd event before adding.
  • The Container's default config values will be applied accordingly (see defaults for details).
  • Fires the 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 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 Ext.toolbar.Toolbar({
                renderTo: document.body
                });  // toolbar is rendered
                // add multiple items.
                // (defaultType for Toolbar is 'button')
                tb.add([{text:'Button 1'}, {text:'Button 2'}]);
                
    To inject components between existing ones, use the insert method. Warning: Components directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
    afterLayout(Container) Invoked after the Container has laid out (and rendered if necessary) its child Components.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    beforeLayout() Occurs before componentLayout is run. Returning false from this method will prevent the containerLayout from being executed.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    cascade(Delegate, object, object) 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.
    child(object) Retrieves the first direct child of this container which matches the passed selector. The passed in selector must comply with an Ext.ComponentQuery selector.
    doLayout() Manually force this container's layout to be recalculated. The framework uses this internally to refresh layouts form most cases.
    down(object) Retrieves the first descendant of this container which matches the passed selector. The passed in selector must comply with an Ext.ComponentQuery selector.
    getComponent(object) Examines this container's items property and gets a direct child component of this container.
    getLayout() Returns the layout instance currently associated with this Container. If a layout has not been instantiated yet, that is done first
    insert(JsNumber, Component) Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
    isAncestor(Component) 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.
    move(JsNumber, JsNumber) Moves a Component within the Container
    onAdd(Component, JsNumber) 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.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    onBeforeAdd(Component) 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.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    onRemove(Component, bool) 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.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    query(object) Retrieves all descendant components which match the passed selector. Executes an Ext.ComponentQuery.query using this container as its root.
    queryBy(Delegate, object) Retrieves all descendant components which match the passed function. The function should return false for components that are to be excluded from the selection.
    queryById(JsString) Finds a component at any level under this container matching the id/itemId. This is a shorthand for calling ct.down('#' + id);
    remove(object, object) Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
    removeAll(object) Removes all components from this container.

    Properties

    Name Description
    items The MixedCollection containing all the child items of this container.
    © Copyright 2005-2011 SharpKit. All rights reserved.