Ext JS 4.2.1 Sencha Docs

Ext.layout.container.Accordion

Alternate names

Ext.layout.AccordionLayout

Hierarchy

Inherited mixins

Files

This is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time (set multi config to have more open). Each Panel has built-in support for expanding and collapsing.

Note: Only Ext Panels and all subclasses of Ext.panel.Panel may be used in an accordion layout Container.

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 300,
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: 'Panel content!'
    },{
        title: 'Panel 2',
        html: 'Panel content!'
    },{
        title: 'Panel 3',
        html: 'Panel content!'
    }],
    renderTo: Ext.getBody()
});

Available since: 3.4.0

Defined By

Config options

Ext.layout.container.Accordion
view source
: Boolean
Only valid when multi is false and animate is false. ...

Only valid when multi is false and animate is false.

True to swap the position of each panel as it is expanded so that it becomes the first item in the container, false to keep the panels in the rendered order.

Defaults to: false

Available since: 3.4.0

Ext.layout.container.Accordion
view source
: String
Controls how the child items of the container are aligned. ...

Controls how the child items of the container are aligned. Acceptable configuration values for this property are:

  • left : Default child items are aligned horizontally at the left side of the container.
  • center : child items are aligned horizontally at the mid-width of the container.
  • right : child items are aligned horizontally at the right of the container.
  • stretch : child items are stretched horizontally to fill the width of the container.
  • stretchmax : child items are stretched horizontally to the size of the largest item.

Defaults to: 'stretch'

Available since: 4.0.0

Overrides: Ext.layout.container.VBox.align

The Math method to use for rounding fractional pixels when align:center is used. ...

The Math method to use for rounding fractional pixels when align:center is used.

Defaults to: 'round'

Available since: 4.2.0

Ext.layout.container.Accordion
view source
: Boolean
True to slide the contained panels open and closed during expand/collapse using animation, false to open and close di...

True to slide the contained panels open and closed during expand/collapse using animation, false to open and close directly with no animation. Note: The layout performs animated collapsing and expanding, not the child Panels.

Defaults to: true

Available since: 3.4.0

Ext.layout.container.Accordion
view source
: Booleanremoved

Child Panels have their width actively managed to fit within the accordion's width.

Child Panels have their width actively managed to fit within the accordion's width.

Available since: 3.4.0

This cfg has been removed

This config is ignored in ExtJS 4

Ext.layout.container.Accordion
view source
: Boolean
True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the cont...

True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the contained Panels' title bars, false to render it last. By default, this will use the Ext.panel.Panel.collapseFirst setting on the panel. If the config option is specified on the layout, it will override the panel value.

Available since: 3.4.0

Limits the size of aligned components to the size of the container under certain circumstances. ...

Limits the size of aligned components to the size of the container under certain circumstances. Firstly, the container width must not be determined by the width of the child components. Secondly, the child components must have their width shrinkwrapped.

Defaults to: false

Available since: 4.1.2

If the individual contained items do not have a margins property specified or margin specified via CSS, the default m...

If the individual contained items do not have a margins property specified or margin specified via CSS, the default margins from this property will be applied to each item.

This property may be specified as an object containing margins to apply in the format:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

This property may also be specified as a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:

  • If there is only one value, it applies to all sides.
  • If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.
  • If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
  • If there are four values, they apply to the top, right, bottom, and left, respectively.

Defaults to: {top: 0, right: 0, bottom: 0, left: 0}

Available since: 3.4.0

Ext.layout.container.Accordion
view source
: Boolean
True to adjust the active item's height to fill the available space in the container, false to use the item's current...

True to adjust the active item's height to fill the available space in the container, false to use the item's current height, or auto height if not explicitly set.

Defaults to: true

Available since: 3.4.0

This configuration option is to be applied to child items of the container managed by this layout. ...

This configuration option is to be applied to child items of the container managed by this layout. Each child item with a flex property will be flexed (horizontally in hbox, vertically in vbox) according to each item's relative flex value compared to the sum of all items with a flex value specified. Any child items that have either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed).

Available since: 4.0.0

Ext.layout.container.Accordion
view source
: Boolean
True to hide the contained Panels' collapse/expand toggle buttons, false to display them. ...

True to hide the contained Panels' collapse/expand toggle buttons, false to display them. When set to true, titleCollapse is automatically set to true.

Defaults to: false

Available since: 3.4.0

Ext.layout.container.Accordion
view source
: String
An optional extra CSS class that will be added to the container. ...

An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See Ext.Component.componentCls also.

Defaults to: [Ext.baseCSSPrefix + 'box-item', Ext.baseCSSPrefix + 'accordion-item']

Available since: 4.0.0

Overrides: Ext.layout.container.Box.itemCls

Ext.layout.container.Accordion
view source
: Boolean
Set to true to enable multiple accordion items to be open at once. ...

Set to true to enable multiple accordion items to be open at once.

Defaults to: false

Available since: 4.0.0

Controls how the child items of the container are packed together. ...

Controls how the child items of the container are packed together. Acceptable configuration values for this property are:

  • start - child items are packed together at left (HBox) or top (VBox) side of container (*default**)
  • center - child items are packed together at mid-width (HBox) or mid-height (VBox) of container
  • end - child items are packed together at right (HBox) or bottom (VBox) side of container

Defaults to: 'start'

Available since: 4.0.0

Sets the padding to be applied to all child items managed by this layout. ...

Sets the padding to be applied to all child items managed by this layout.

This property must be specified as a string containing space-separated, numeric padding values. The order of the sides associated with each value matches the way CSS processes padding values:

  • If there is only one value, it applies to all sides.
  • If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.
  • If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
  • If there are four values, they apply to the top, right, bottom, and left, respectively.

Defaults to: 0

Available since: 3.4.0

Allows stretchMax calculation to take into account the max perpendicular size (height for HBox layout and width for V...

Allows stretchMax calculation to take into account the max perpendicular size (height for HBox layout and width for VBox layout) of another Box layout when calculating its maximum perpendicular child size.

If specified as a string, this may be either a known Container ID, or a ComponentQuery selector which is rooted at this layout's Container (ie, to find a sibling, use "^>#siblingItemId).

Available since: 4.1.0

Ext.layout.container.Accordion
view source
: Boolean
True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow expand/co...

True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow expand/collapse only when the toggle tool button is clicked. When set to false, hideCollapseTool should be false also. An explicit Ext.panel.Panel.titleCollapse declared on the panel will override this setting.

Defaults to: true

Available since: 3.4.0

Properties

Defined By

Instance properties

...

Defaults to: 'Ext.Base'

Available since: 4.1.1

Matches: <spaces>digits[.digits]<spaces>%<spaces> Captures: digits[.digits] ...

Matches: <spaces>digits[.digits]<spaces>%<spaces> Captures: digits[.digits]

Defaults to: /^\s*(\d+(?:\.\d*)?)\s*[%]\s*$/

Available since: 4.1.1

...

Defaults to: 'round'

Available since: 4.2.0

An object which contains boolean properties specifying which properties are to be animated upon flush of child Compon...

An object which contains boolean properties specifying which properties are to be animated upon flush of child Component ContextItems. For example, Accordion would have:

 {
     y: true,
     height: true
 }

Available since: 4.1.0

...

Defaults to: {readsWidth: 1, readsHeight: 1, setsWidth: 0, setsHeight: 0}

Available since: 4.1.0

availableSpaceOffset is used to adjust the availableWidth, typically used to reserve space for a scrollbar ...

availableSpaceOffset is used to adjust the availableWidth, typically used to reserve space for a scrollbar

Defaults to: 0

Available since: 4.0.0

...

Defaults to: ['innerCt', 'targetEl']

Available since: 4.1.0

Overrides: Ext.layout.container.Container.childEls

...

Defaults to: {}

Available since: 4.1.1

...

Defaults to: true

Available since: 4.1.2

Ext.layout.container.Accordion
view source
: Objectprivate
...

Defaults to: {y: true, height: true}

Available since: 4.1.0

...

Defaults to: 'vertical'

Available since: 4.0.0

Used only during a layout run, this value indicates that a layout has finished its calculations. ...

Used only during a layout run, this value indicates that a layout has finished its calculations. This flag is set to true prior to the call to calculate and should be set to false if this layout has more work to do.

Available since: 4.1.0

...

Defaults to: false

Available since: 4.1.0

...

Defaults to: []

Available since: 4.1.1

...

Defaults to: {}

Available since: 4.1.1

...

Defaults to: false

Available since: 4.0.0

...

Defaults to: Ext.baseCSSPrefix + 'box-inner'

Available since: 3.4.0

...

Defaults to: true

Available since: 4.1.1

true in this class to identify an object as an instantiated Layout, or subclass thereof. ...

true in this class to identify an object as an instantiated Layout, or subclass thereof.

Defaults to: true

Available since: 4.0.0

...

Defaults to: true

Available since: 4.1.0

...

Defaults to: {beforeX: 'top', beforeScrollX: 'top', beforeScrollerSuffix: '-before-scroller', afterScrollerSuffix: '-after-scroller', leftCap: 'Top', afterX: 'bottom', width: 'height', contentWidth: 'contentHeight', minWidth: 'minHeight', maxWidth: 'maxHeight', widthCap: 'Height', widthModel: 'heightModel', widthIndex: 1, x: 'y', scrollLeft: 'scrollTop', overflowX: 'overflowY', hasOverflowX: 'hasOverflowY', invalidateScrollX: 'invalidateScrollY', parallelMargins: 'tb', center: 'center', beforeY: 'left', afterY: 'right', height: 'width', contentHeight: 'contentWidth', minHeight: 'minWidth', maxHeight: 'maxWidth', heightCap: 'Width', heightModel: 'widthModel', heightIndex: 0, y: 'x', overflowY: 'overflowX', hasOverflowY: 'hasOverflowX', invalidateScrollY: 'invalidateScrollX', perpendicularMargins: 'lr', getWidth: 'getHeight', getHeight: 'getWidth', setWidth: 'setHeight', setHeight: 'setWidth', gotWidth: 'gotHeight', gotHeight: 'gotWidth', setContentWidth: 'setContentHeight', setContentHeight: 'setContentWidth', setWidthInDom: 'setHeightInDom', setHeightInDom: 'setWidthInDom', getScrollLeft: 'getScrollTop', setScrollLeft: 'setScrollTop', scrollTo: 'scrollTo'}

Available since: 4.1.0

The element used to correct body padding during overflow.

The element used to correct body padding during overflow.

Available since: 4.1.0

...

Defaults to: ['{%var oc,l=values.$comp.layout,oh=l.overflowHandler;', 'if (oh.getPrefixConfig!==Ext.emptyFn) {', 'if(oc=oh.getPrefixConfig())dh.generateMarkup(oc, out)', '}%}', '<div id="{ownerId}-innerCt" class="{[l.innerCls]} {[oh.getOverflowCls()]}" role="presentation">', '<div id="{ownerId}-targetEl" class="{targetElCls}">', '{%this.renderBody(out, values)%}', '</div>', '</div>', '{%if (oh.getSuffixConfig!==Ext.emptyFn) {', 'if(oc=oh.getSuffixConfig())dh.generateMarkup(oc, out)', '}%}', {disableFormats: true, definitions: 'var dh=Ext.DomHelper;'}]

Available since: 4.1.0

Overrides: Ext.layout.container.Container.renderTpl

whether or not to reserve the availableSpaceOffset in layout calculations ...

whether or not to reserve the availableSpaceOffset in layout calculations

Defaults to: true

Available since: 4.0.0

...

Defaults to: false

Available since: 4.1.0

...

Defaults to: 0

Available since: 3.4.0

Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

...

Defaults to: {flex: {'': {readsWidth: 1, readsHeight: 0, setsWidth: 0, setsHeight: 1}, stretch: {readsWidth: 0, readsHeight: 0, setsWidth: 1, setsHeight: 1}, stretchmax: {readsWidth: 1, readsHeight: 0, setsWidth: 1, setsHeight: 1}}, '': {readsWidth: 1, readsHeight: 1, setsWidth: 0, setsHeight: 0}, stretch: {readsWidth: 0, readsHeight: 1, setsWidth: 1, setsHeight: 0}, stretchmax: {readsWidth: 1, readsHeight: 1, setsWidth: 1, setsHeight: 0}}

Available since: 4.1.0

Ext.layout.container.Accordion
view source
: Stringprivate
...

Defaults to: Ext.baseCSSPrefix + 'accordion-layout-ct'

Available since: 4.0.0

Overrides: Ext.layout.container.Box.targetCls

...

Defaults to: Ext.baseCSSPrefix + 'box-target'

Available since: 4.2.0

...

Defaults to: 'vbox'

Available since: 3.4.0

Overrides: Ext.layout.container.Box.type

...

Defaults to: true

Available since: 4.1.0

...

Defaults to: true

Available since: 4.1.0

...

Defaults to: true

Available since: 4.1.0

...

Defaults to: true

Available since: 4.1.0

Defined By

Static properties

...

Defaults to: []

Available since: 4.1.1

Methods

Defined By

Instance methods

Adds each argument passed to this method to the childEls array. ...

Adds each argument passed to this method to the childEls array.

Available since: 4.1.0

Fires

    Removes layout's itemCls and owning Container's itemCls. ...

    Removes layout's itemCls and owning Container's itemCls. Clears the managed dimensions flags

    Available since: 4.0.0

    Parameters

    ...

    Available since: 4.1.0

    Sets references to elements inside the component. ...

    Sets references to elements inside the component.

    Available since: 4.1.0

    Parameters

    Fires

      Ext.layout.container.Accordion
      view source
      ( items )private
      ...

      Available since: 4.1.0

      Parameters

      Fires

        Called by an owning Panel before the Panel begins its collapse process. ...

        Called by an owning Panel before the Panel begins its collapse process. Most layouts will not need to override the default Ext.emptyFn implementation.

        Available since: 4.1.0

        Parameters

        Overrides: Ext.layout.container.Container.beginCollapse

        Called by an owning Panel before the Panel begins its expand process. ...

        Called by an owning Panel before the Panel begins its expand process. Most layouts will not need to override the default Ext.emptyFn implementation.

        Available since: 4.1.0

        Parameters

        Overrides: Ext.layout.container.Container.beginExpand

        Ext.layout.container.Accordion
        view source
        ( ownerContext )
        In addition to work done by our base classes, containers benefit from some extra cached data. ...

        In addition to work done by our base classes, containers benefit from some extra cached data. The following properties are added to the ownerContext:

        • visibleItems: the result of getVisibleItems
        • childItems: the ContextItem[] for each visible item
        • targetContext: the ContextItem for the getTarget element

        Available since: 4.1.0

        Parameters

        Fires

          Overrides: Ext.layout.container.Container.beginLayout, Ext.layout.container.Box.beginLayout

          Called before any calculation cycles to reset DOM values and prepare for calculation. ...

          Called before any calculation cycles to reset DOM values and prepare for calculation.

          This is a write phase and DOM reads should be strictly avoided when overridding this method.

          Available since: 4.1.0

          Parameters

          Fires

            Overrides: Ext.layout.container.Container.beginLayoutCycle

            ...

            Available since: 4.1.0

            Parameters

            Fires

              ...

              Available since: 4.1.0

              Fires

                This method is called to (re)cache our understanding of flexes. ...

                This method is called to (re)cache our understanding of flexes. This happens during beginLayout and may need to be called again if the flexes are changed during the layout (e.g., like ColumnLayout).

                Available since: 4.1.0

                Parameters

                Called to perform the calculations for this layout. ...

                Called to perform the calculations for this layout. This method will be called at least once and may be called repeatedly if the done property is cleared before return to indicate that this layout is not yet done. The done property is always set to true before entering this method.

                This is a read phase and DOM writes should be strictly avoided in derived classes. Instead, DOM writes need to be written to Ext.layout.ContextItem objects to be flushed at the next opportunity.

                Available since: 4.1.0

                Parameters

                Fires

                  Overrides: Ext.layout.Layout.calculate, Ext.layout.container.Box.calculate

                  ( ownerContext, names, plan )private
                  ...

                  Available since: 4.1.0

                  Parameters

                  Fires

                    ...

                    Available since: 4.1.0

                    Parameters

                    ( ownerContext, names, plan )private
                    ...

                    Available since: 4.1.0

                    Parameters

                    ( args ) : Objectdeprecatedprotected
                    Call the original method that was previously overridden with override Ext.define('My.Cat', { constructor: functi...

                    Call the original method that was previously overridden with override

                    Ext.define('My.Cat', {
                        constructor: function() {
                            alert("I'm a cat!");
                        }
                    });
                    
                    My.Cat.override({
                        constructor: function() {
                            alert("I'm going to be a cat!");
                    
                            this.callOverridden();
                    
                            alert("Meeeeoooowwww");
                        }
                    });
                    
                    var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                              // alerts "I'm a cat!"
                                              // alerts "Meeeeoooowwww"
                    

                    Available since: 4.0.0

                    This method has been deprecated

                    as of 4.1. Use callParent instead.

                    Parameters

                    • args : Array/Arguments

                      The arguments, either an array or the arguments object from the current method, for example: this.callOverridden(arguments)

                    Returns

                    • Object

                      Returns the result of calling the overridden method

                    Call the "parent" method of the current method. ...

                    Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

                     Ext.define('My.Base', {
                         constructor: function (x) {
                             this.x = x;
                         },
                    
                         statics: {
                             method: function (x) {
                                 return x;
                             }
                         }
                     });
                    
                     Ext.define('My.Derived', {
                         extend: 'My.Base',
                    
                         constructor: function () {
                             this.callParent([21]);
                         }
                     });
                    
                     var obj = new My.Derived();
                    
                     alert(obj.x);  // alerts 21
                    

                    This can be used with an override as follows:

                     Ext.define('My.DerivedOverride', {
                         override: 'My.Derived',
                    
                         constructor: function (x) {
                             this.callParent([x*2]); // calls original My.Derived constructor
                         }
                     });
                    
                     var obj = new My.Derived();
                    
                     alert(obj.x);  // now alerts 42
                    

                    This also works with static methods.

                     Ext.define('My.Derived2', {
                         extend: 'My.Base',
                    
                         statics: {
                             method: function (x) {
                                 return this.callParent([x*2]); // calls My.Base.method
                             }
                         }
                     });
                    
                     alert(My.Base.method(10);     // alerts 10
                     alert(My.Derived2.method(10); // alerts 20
                    

                    Lastly, it also works with overridden static methods.

                     Ext.define('My.Derived2Override', {
                         override: 'My.Derived2',
                    
                         statics: {
                             method: function (x) {
                                 return this.callParent([x*2]); // calls My.Derived2.method
                             }
                         }
                     });
                    
                     alert(My.Derived2.method(10); // now alerts 40
                    

                    To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

                    Available since: 4.0.0

                    Parameters

                    • args : Array/Arguments

                      The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

                    Returns

                    • Object

                      Returns the result of calling the parent method

                    This method is used by an override to call the superclass method but bypass any overridden method. ...

                    This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.

                    Consider:

                     Ext.define('Ext.some.Class', {
                         method: function () {
                             console.log('Good');
                         }
                     });
                    
                     Ext.define('Ext.some.DerivedClass', {
                         method: function () {
                             console.log('Bad');
                    
                             // ... logic but with a bug ...
                    
                             this.callParent();
                         }
                     });
                    

                    To patch the bug in DerivedClass.method, the typical solution is to create an override:

                     Ext.define('App.paches.DerivedClass', {
                         override: 'Ext.some.DerivedClass',
                    
                         method: function () {
                             console.log('Fixed');
                    
                             // ... logic but with bug fixed ...
                    
                             this.callSuper();
                         }
                     });
                    

                    The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good".

                    Available since: 4.1.3

                    Parameters

                    • args : Array/Arguments

                      The arguments, either an array or the arguments object from the current method, for example: this.callSuper(arguments)

                    Returns

                    • Object

                      Returns the result of calling the superclass method

                    This method (if implemented) is called at the end of the cycle in which this layout completes (by not setting done to...

                    This method (if implemented) is called at the end of the cycle in which this layout completes (by not setting done to false in calculate). It is possible for the layout to complete and yet become invalid before the end of the cycle, in which case, this method will not be called. It is also possible for this method to be called and then later the layout becomes invalidated. This will result in calculate being called again, followed by another call to this method.

                    This is a read phase and DOM writes should be strictly avoided in derived classes. Instead, DOM writes need to be written to Ext.layout.ContextItem objects to be flushed at the next opportunity.

                    This method need not be implemented by derived classes and, in fact, should only be implemented when needed.

                    Available since: 4.1.0

                    Parameters

                    Fires

                      Overrides: Ext.layout.Layout.completeLayout, Ext.layout.container.Box.completeLayout

                      ...

                      Available since: 4.1.1

                      Ext.layout.container.Accordion
                      view source
                      ( item )protected
                      Adds layout's itemCls and owning Container's itemCls ...

                      Adds layout's itemCls and owning Container's itemCls

                      Available since: 3.4.0

                      Parameters

                      Fires

                        Overrides: Ext.layout.Layout.configureItem, Ext.layout.container.Container.configureItem

                        ...

                        Available since: 4.1.0

                        Parameters

                        Fires

                          ...

                          Available since: 4.1.0

                          Parameters

                          ...

                          Available since: 4.1.0

                          Parameters

                          This method (if implemented) is called after all layouts have completed. ...

                          This method (if implemented) is called after all layouts have completed. In most ways this is similar to completeLayout. This call can cause this (or any layout) to be become invalid (see Ext.layout.Context.invalidate), but this is best avoided. This method is intended to be where final reads are made and so it is best to avoid invalidating layouts at this point whenever possible. Even so, this method can be used to perform final checks that may require all other layouts to be complete and then invalidate some results.

                          This is a read phase and DOM writes should be strictly avoided in derived classes. Instead, DOM writes need to be written to Ext.layout.ContextItem objects to be flushed at the next opportunity.

                          This method need not be implemented by derived classes and, in fact, should only be implemented when needed.

                          Available since: 4.1.0

                          Parameters

                          ...

                          Available since: 4.1.0

                          Parameters

                          Fires

                            This method is called after all layouts are complete and their calculations flushed to the DOM. ...

                            This method is called after all layouts are complete and their calculations flushed to the DOM. No further layouts will be run and this method is only called once per layout run. The base component layout caches lastComponentSize.

                            This is a write phase and DOM reads should be avoided if possible when overridding this method.

                            This method need not be implemented by derived classes and, in fact, should only be implemented when needed.

                            Available since: 4.1.0

                            Parameters

                            Fires

                              Overrides: Ext.layout.Layout.finishedLayout

                              ...

                              Available since: 4.1.0

                              Parameters

                              ...

                              Available since: 4.1.0

                              ...

                              Available since: 4.1.0

                              Fires

                                ...

                                Available since: 4.1.0

                                Parameters

                                Fires

                                  ...

                                  Available since: 4.1.0

                                  Parameters

                                  Returns the container size (that of the target). ...

                                  Returns the container size (that of the target). Only the fixed-sized dimensions can be returned because the shrinkWrap dimensions are based on the contentWidth/Height as determined by the container layout.

                                  Available since: 4.1.0

                                  Parameters

                                  • ownerContext : Ext.layout.ContextItem

                                    The owner's context item.

                                  • inDom : Boolean (optional)

                                    True if the container size must be in the DOM.

                                    Defaults to: false

                                  Returns

                                  Overridden method from Ext.layout.container.Container. ...

                                  Overridden method from Ext.layout.container.Container. Used by Container classes to insert special DOM elements which must exist in addition to the child components

                                  Available since: 4.1.0

                                  Returns

                                  Fires

                                    Overrides: Ext.layout.container.Container.getElementTarget

                                    Ext.layout.container.Accordion
                                    view source
                                    ( explicitCheck )private
                                    ...

                                    Available since: 4.2.0

                                    Parameters

                                    Returns the initial configuration passed to constructor when instantiating this class. ...

                                    Returns the initial configuration passed to constructor when instantiating this class.

                                    Available since: 4.1.0

                                    Parameters

                                    • name : String (optional)

                                      Name of the config option to return.

                                    Returns

                                    • Object/Mixed

                                      The full config object or a single config value when name parameter specified.

                                    Returns an object describing how this layout manages the size of the given component. ...

                                    Returns an object describing how this layout manages the size of the given component. This method must be implemented by any layout that manages components.

                                    Available since: 4.1.0

                                    Parameters

                                    Returns

                                    Overrides: Ext.layout.Layout.getItemSizePolicy

                                    Ext.layout.container.Accordion
                                    view source
                                    ( items )private
                                    ...

                                    Available since: 4.1.0

                                    Parameters

                                    Fires

                                      Overrides: Ext.layout.Layout.getItemsRenderTree

                                      Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's ...

                                      Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's base class), or the layout phase (onLayout).

                                      Available since: 4.0.0

                                      Returns

                                      Overrides: Ext.layout.Layout.getLayoutItems, Ext.layout.container.Container.getLayoutItems

                                      This method is used to offset the DOM position when checking whether the element is a certain child of the target. ...

                                      This method is used to offset the DOM position when checking whether the element is a certain child of the target. This is required in cases where the extra elements prepended to the target before any of the items. An example of this is when using labelAlign: 'top' on a field. The label appears first in the DOM before any child items are created, so when we check the position we need to add an extra offset. Containers that create an innerCt are exempt because this new element preserves the order

                                      Available since: 4.1.2

                                      Parameters

                                      Overrides: Ext.layout.Layout.getPositionOffset

                                      Overridden method from Ext.layout.container.Container. ...

                                      Overridden method from Ext.layout.container.Container. Used in the beforeLayout method to render all items into.

                                      Available since: 4.0.0

                                      Returns

                                      Overrides: Ext.layout.container.Container.getRenderTarget

                                      ...

                                      Available since: 4.1.0

                                      ...

                                      Available since: 4.1.0

                                      Fires

                                        Returns all items that are rendered ...

                                        Returns all items that are rendered

                                        Available since: 3.4.0

                                        Returns

                                        Fires

                                          ( width, height, contentWidth, contentHeight )private
                                          ...

                                          Available since: 4.1.0

                                          Parameters

                                          Returns the owner component's resize element. ...

                                          Returns the owner component's resize element.

                                          Available since: 4.0.0

                                          Returns

                                          Returns all items that are both rendered and visible ...

                                          Returns all items that are both rendered and visible

                                          Available since: 4.0.0

                                          Returns

                                          Fires

                                            ...

                                            Available since: 4.1.0

                                            Parameters

                                            ( config ) : Ext.Basechainableprotected
                                            Initialize configuration for this class. ...

                                            Initialize configuration for this class. a typical example:

                                            Ext.define('My.awesome.Class', {
                                                // The default config
                                                config: {
                                                    name: 'Awesome',
                                                    isAwesome: true
                                                },
                                            
                                                constructor: function(config) {
                                                    this.initConfig(config);
                                                }
                                            });
                                            
                                            var awesome = new My.awesome.Class({
                                                name: 'Super Awesome'
                                            });
                                            
                                            alert(awesome.getName()); // 'Super Awesome'
                                            

                                            Available since: 4.0.0

                                            Parameters

                                            Returns

                                            A one-time initialization method called just before rendering. ...

                                            A one-time initialization method called just before rendering.

                                            Available since: 4.0.0

                                            ...

                                            Available since: 4.0.0

                                            ...

                                            Available since: 4.1.0

                                            Parameters

                                            Overrides: Ext.layout.Layout.isItemBoxParent

                                            ...

                                            Available since: 4.1.0

                                            Parameters

                                            ...

                                            Available since: 4.1.0

                                            Parameters

                                            Overrides: Ext.layout.Layout.isItemShrinkWrap

                                            ...

                                            Available since: 4.1.0

                                            ( item, target, position )protected
                                            Validates item is in the proper place in the dom. ...

                                            Validates item is in the proper place in the dom.

                                            Available since: 4.0.0

                                            Parameters

                                            Fires

                                              ( item, target, position )private
                                              Moves Component to the provided target instead. ...

                                              Moves Component to the provided target instead.

                                              Available since: 4.0.0

                                              Parameters

                                              Fires

                                                Called for every layout in the layout context after all the layouts have been finally flushed ...

                                                Called for every layout in the layout context after all the layouts have been finally flushed

                                                Available since: 4.1.0

                                                Overrides: Ext.layout.Layout.notifyOwner

                                                ...

                                                Available since: 4.1.0

                                                Parameters

                                                ...

                                                Available since: 4.1.2

                                                Parameters

                                                ...

                                                Available since: 4.1.2

                                                Parameters

                                                ...

                                                Available since: 4.1.2

                                                Parameters

                                                ...

                                                Available since: 4.1.2

                                                Parameters

                                                Ext.layout.container.Accordion
                                                view source
                                                ( comp )private
                                                ...

                                                Available since: 4.0.0

                                                Parameters

                                                Fires

                                                  Ext.layout.container.Accordion
                                                  view source
                                                  ( toExpand )private
                                                  When a Component expands, adjust the heights of the other Components to be just enough to accommodate their headers. ...

                                                  When a Component expands, adjust the heights of the other Components to be just enough to accommodate their headers. The expanded Component receives the only flex value, and so gets all remaining space.

                                                  Available since: 4.0.0

                                                  Parameters

                                                  Fires

                                                    Ext.layout.container.Accordion
                                                    view source
                                                    ( comp )private
                                                    ...

                                                    Available since: 4.0.0

                                                    Parameters

                                                    Fires

                                                      ( names, callback, scope )private
                                                      ...

                                                      Available since: 4.1.0

                                                      Parameters

                                                      This method is called when a child item changes in some way. ...

                                                      This method is called when a child item changes in some way. By default this calls Ext.AbstractComponent.updateLayout on this layout's owner.

                                                      Available since: 4.1.0

                                                      Parameters

                                                      Returns

                                                      • Boolean

                                                        True if this layout has handled the content change.

                                                      ...

                                                      Available since: 4.0.0

                                                      ...

                                                      Available since: 3.4.0

                                                      Parameters

                                                      Fires

                                                        Overrides: Ext.layout.Layout.onRemove

                                                        ...

                                                        Available since: 4.1.0

                                                        Parameters

                                                        ( ownerContext, reservedSpace )private
                                                        ...

                                                        Available since: 4.1.0

                                                        Parameters

                                                        Removes items in the childEls array based on the return value of a supplied test function. ...

                                                        Removes items in the childEls array based on the return value of a supplied test function. The function is called with a entry in childEls and if the test function return true, that entry is removed. If false, that entry is kept.

                                                        Available since: 4.1.0

                                                        Parameters

                                                        Fires

                                                          ( item, target, position )private
                                                          Renders the given Component into the target Element. ...

                                                          Renders the given Component into the target Element.

                                                          Available since: 4.0.0

                                                          Parameters

                                                          Fires

                                                            Ext.layout.container.Accordion
                                                            view source
                                                            ( items, target )protected
                                                            Iterates over all passed items, ensuring they are rendered. ...

                                                            Iterates over all passed items, ensuring they are rendered. If the items are already rendered, also determines if the items are in the proper place in the dom.

                                                            Available since: 4.0.0

                                                            Parameters

                                                            Fires

                                                              Overrides: Ext.layout.Layout.renderItems

                                                              ...

                                                              Available since: 4.1.0

                                                              Parameters

                                                              ( config, applyIfNotSet ) : Ext.Basechainableprivate
                                                              ...

                                                              Available since: 4.0.0

                                                              Parameters

                                                              Returns

                                                              Sets the layout owner ...

                                                              Sets the layout owner

                                                              Available since: 4.0.0

                                                              Parameters

                                                              ...

                                                              Available since: 4.1.0

                                                              Parameters

                                                              ...

                                                              Available since: 4.1.0

                                                              Parameters

                                                              Get the reference to the class from which this object was instantiated. ...

                                                              Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time

                                                              Ext.define('My.Cat', {
                                                                  statics: {
                                                                      totalCreated: 0,
                                                                      speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                                                                  },
                                                              
                                                                  constructor: function() {
                                                                      var statics = this.statics();
                                                              
                                                                      alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                                                                                      // equivalent to: My.Cat.speciesName
                                                              
                                                                      alert(this.self.speciesName);   // dependent on 'this'
                                                              
                                                                      statics.totalCreated++;
                                                                  },
                                                              
                                                                  clone: function() {
                                                                      var cloned = new this.self;                      // dependent on 'this'
                                                              
                                                                      cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
                                                              
                                                                      return cloned;
                                                                  }
                                                              });
                                                              
                                                              
                                                              Ext.define('My.SnowLeopard', {
                                                                  extend: 'My.Cat',
                                                              
                                                                  statics: {
                                                                      speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                                                                  },
                                                              
                                                                  constructor: function() {
                                                                      this.callParent();
                                                                  }
                                                              });
                                                              
                                                              var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
                                                              
                                                              var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
                                                              
                                                              var clone = snowLeopard.clone();
                                                              alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
                                                              alert(clone.groupName);                 // alerts 'Cat'
                                                              
                                                              alert(My.Cat.totalCreated);             // alerts 3
                                                              

                                                              Available since: 4.0.0

                                                              Returns

                                                              ...

                                                              Available since: 4.1.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              ( ownerContext )private
                                                              ...

                                                              Available since: 4.0.0

                                                              Parameters

                                                              Defined By

                                                              Static methods

                                                              ( config )privatestatic
                                                              ...

                                                              Available since: 4.1.1

                                                              Parameters

                                                              ( members )chainableprivatestatic
                                                              ...

                                                              Available since: 4.1.1

                                                              Parameters

                                                              ( name, member )chainableprivatestatic
                                                              ...

                                                              Available since: 4.1.1

                                                              Parameters

                                                              ( members )chainablestatic
                                                              Add methods / properties to the prototype of this class. ...

                                                              Add methods / properties to the prototype of this class.

                                                              Ext.define('My.awesome.Cat', {
                                                                  constructor: function() {
                                                                      ...
                                                                  }
                                                              });
                                                              
                                                               My.awesome.Cat.addMembers({
                                                                   meow: function() {
                                                                      alert('Meowww...');
                                                                   }
                                                               });
                                                              
                                                               var kitty = new My.awesome.Cat;
                                                               kitty.meow();
                                                              

                                                              Available since: 4.1.0

                                                              Parameters

                                                              ( members ) : Ext.Basechainablestatic
                                                              Add / override static properties of this class. ...

                                                              Add / override static properties of this class.

                                                              Ext.define('My.cool.Class', {
                                                                  ...
                                                              });
                                                              
                                                              My.cool.Class.addStatics({
                                                                  someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
                                                                  method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
                                                                  method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
                                                              });
                                                              

                                                              Available since: 4.0.2

                                                              Parameters

                                                              Returns

                                                              ( xtype )chainableprivatestatic
                                                              ...

                                                              Available since: 4.1.1

                                                              Parameters

                                                              ( fromClass, members ) : Ext.Basechainableprivatestatic
                                                              Borrow another class' members to the prototype of this class. ...

                                                              Borrow another class' members to the prototype of this class.

                                                              Ext.define('Bank', {
                                                                  money: '$$$',
                                                                  printMoney: function() {
                                                                      alert('$$$$$$$');
                                                                  }
                                                              });
                                                              
                                                              Ext.define('Thief', {
                                                                  ...
                                                              });
                                                              
                                                              Thief.borrow(Bank, ['money', 'printMoney']);
                                                              
                                                              var steve = new Thief();
                                                              
                                                              alert(steve.money); // alerts '$$$'
                                                              steve.printMoney(); // alerts '$$$$$$$'
                                                              

                                                              Available since: 4.0.2

                                                              Parameters

                                                              • fromClass : Ext.Base

                                                                The class to borrow members from

                                                              • members : Array/String

                                                                The names of the members to borrow

                                                              Returns

                                                              Create a new instance of this Class. ...

                                                              Create a new instance of this Class.

                                                              Ext.define('My.cool.Class', {
                                                                  ...
                                                              });
                                                              
                                                              My.cool.Class.create({
                                                                  someConfig: true
                                                              });
                                                              

                                                              All parameters are passed to the constructor of the class.

                                                              Available since: 4.0.2

                                                              Returns

                                                              Overrides: Ext.layout.Layout.create

                                                              ( alias, origin )static
                                                              Create aliases for existing prototype methods. ...

                                                              Create aliases for existing prototype methods. Example:

                                                              Ext.define('My.cool.Class', {
                                                                  method1: function() { ... },
                                                                  method2: function() { ... }
                                                              });
                                                              
                                                              var test = new My.cool.Class();
                                                              
                                                              My.cool.Class.createAlias({
                                                                  method3: 'method1',
                                                                  method4: 'method2'
                                                              });
                                                              
                                                              test.method3(); // test.method1()
                                                              
                                                              My.cool.Class.createAlias('method5', 'method3');
                                                              
                                                              test.method5(); // test.method3() -> test.method1()
                                                              

                                                              Available since: 4.0.2

                                                              Parameters

                                                              ( config )privatestatic
                                                              ...

                                                              Available since: 4.1.1

                                                              Parameters

                                                              Get the current class' name in string format. ...

                                                              Get the current class' name in string format.

                                                              Ext.define('My.cool.Class', {
                                                                  constructor: function() {
                                                                      alert(this.self.getName()); // alerts 'My.cool.Class'
                                                                  }
                                                              });
                                                              
                                                              My.cool.Class.getName(); // 'My.cool.Class'
                                                              

                                                              Available since: 4.0.4

                                                              Returns

                                                              ( )deprecatedstatic
                                                              Adds members to class. ...

                                                              Adds members to class.

                                                              Available since: 4.0.2

                                                              This method has been deprecated since 4.1

                                                              Use addMembers instead.

                                                              ( name, mixinClass )privatestatic
                                                              Used internally by the mixins pre-processor ...

                                                              Used internally by the mixins pre-processor

                                                              Available since: 4.1.1

                                                              Parameters

                                                              ( fn, scope )chainableprivatestatic
                                                              ...

                                                              Available since: 4.1.1

                                                              Parameters

                                                              ( members ) : Ext.Basechainabledeprecatedstatic
                                                              Override members of this class. ...

                                                              Override members of this class. Overridden methods can be invoked via callParent.

                                                              Ext.define('My.Cat', {
                                                                  constructor: function() {
                                                                      alert("I'm a cat!");
                                                                  }
                                                              });
                                                              
                                                              My.Cat.override({
                                                                  constructor: function() {
                                                                      alert("I'm going to be a cat!");
                                                              
                                                                      this.callParent(arguments);
                                                              
                                                                      alert("Meeeeoooowwww");
                                                                  }
                                                              });
                                                              
                                                              var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                                                                        // alerts "I'm a cat!"
                                                                                        // alerts "Meeeeoooowwww"
                                                              

                                                              As of 4.1, direct use of this method is deprecated. Use Ext.define instead:

                                                              Ext.define('My.CatOverride', {
                                                                  override: 'My.Cat',
                                                                  constructor: function() {
                                                                      alert("I'm going to be a cat!");
                                                              
                                                                      this.callParent(arguments);
                                                              
                                                                      alert("Meeeeoooowwww");
                                                                  }
                                                              });
                                                              

                                                              The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).

                                                              Available since: 4.0.2

                                                              This method has been deprecated since 4.1.0

                                                              Use Ext.define instead

                                                              Parameters

                                                              • members : Object

                                                                The properties to add to this class. This should be specified as an object literal containing one or more properties.

                                                              Returns

                                                              ...

                                                              Available since: 4.1.1

                                                              Defined By

                                                              CSS Variables

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : color
                                                              The background-color of the Accordion layout element ...

                                                              The background-color of the Accordion layout element

                                                              Defaults to: #fff

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : string
                                                              The text-transform property of Accordion headers ...

                                                              The text-transform property of Accordion headers

                                                              Defaults to: 0

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : color
                                                              The background-color of Accordion headers ...

                                                              The background-color of Accordion headers

                                                              Defaults to: $base-color

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : number/list
                                                              The border-width of Accordion headers ...

                                                              The border-width of Accordion headers

                                                              Defaults to: 1px 0

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : color
                                                              The text color of Accordion headers ...

                                                              The text color of Accordion headers

                                                              Defaults to: #000

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : string
                                                              The font-family of Accordion headers ...

                                                              The font-family of Accordion headers

                                                              Defaults to: $font-family

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : string
                                                              The font-weight of Accordion headers ...

                                                              The font-weight of Accordion headers

                                                              Defaults to: normal

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : number/list
                                                              The padding of Accordion headers ...

                                                              The padding of Accordion headers

                                                              Defaults to: 4px 5px

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : string
                                                              The text-transform property of Accordion headers ...

                                                              The text-transform property of Accordion headers

                                                              Defaults to: none

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : number
                                                              The size of Tools in Accordion headers ...

                                                              The size of Tools in Accordion headers

                                                              Defaults to: $tool-size

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : number/list
                                                              The padding of the Accordion layout element ...

                                                              The padding of the Accordion layout element

                                                              Defaults to: 0

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : color
                                                              The background-color of the Accordion layout element ...

                                                              The background-color of the Accordion layout element

                                                              Defaults to: 0

                                                              Available since: 4.2.0

                                                              Ext.layout.container.Accordion
                                                              view source
                                                              : string
                                                              The sprite image to use for Tools in Accordion headers ...

                                                              The sprite image to use for Tools in Accordion headers

                                                              Defaults to: 'tools/tool-sprites'

                                                              Available since: 4.2.0