Ext JS 4.1.3 Sencha Docs

Ext.layout.container.Card

Alternate names

Ext.layout.CardLayout

Hierarchy

Inherited mixins

Files

This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. This class is intended to be extended or created via the layout:'card' Ext.container.Container.layout config, and should generally not need to be created directly via the new keyword.

The CardLayout's focal method is setActiveItem. Since only one panel is displayed at a time, the only way to move from one Component to the next is by calling setActiveItem, passing the next panel to display (or its id or index). The layout itself does not provide a user interface for handling this navigation, so that functionality must be provided by the developer.

To change the active card of a container, call the setActiveItem method of its layout:

var p = Ext.create('Ext.panel.Panel', {
    layout: 'card',
    items: [
        { html: 'Card 1' },
        { html: 'Card 2' }
    ],
    renderTo: Ext.getBody()
});

p.getLayout().setActiveItem(1);

In the following example, a simplistic wizard setup is demonstrated. A button bar is added to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a common navigation routine. Note that other uses of a CardLayout (like a tab control) would require a completely different implementation. For serious implementations, a better approach would be to extend CardLayout to provide the custom functionality needed.

var navigate = function(panel, direction){
    // This routine could contain business logic required to manage the navigation steps.
    // It would call setActiveItem as needed, manage navigation button state, handle any
    // branching logic that might be required, handle alternate actions like cancellation
    // or finalization, etc.  A complete wizard implementation could get pretty
    // sophisticated depending on the complexity required, and should probably be
    // done as a subclass of CardLayout in a real-world implementation.
    var layout = panel.getLayout();
    layout[direction]();
    Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
    Ext.getCmp('move-next').setDisabled(!layout.getNext());
};

Ext.create('Ext.panel.Panel', {
    title: 'Example Wizard',
    width: 300,
    height: 200,
    layout: 'card',
    bodyStyle: 'padding:15px',
    defaults: {
        // applied to each contained panel
        border: false
    },
    // just an example of one possible navigation scheme, using buttons
    bbar: [
        {
            id: 'move-prev',
            text: 'Back',
            handler: function(btn) {
                navigate(btn.up("panel"), "prev");
            },
            disabled: true
        },
        '->', // greedy spacer so that the buttons are aligned to each side
        {
            id: 'move-next',
            text: 'Next',
            handler: function(btn) {
                navigate(btn.up("panel"), "next");
            }
        }
    ],
    // the panels (or "cards") within the layout
    items: [{
        id: 'card-0',
        html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
    },{
        id: 'card-1',
        html: '<p>Step 2 of 3</p>'
    },{
        id: 'card-2',
        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
    }],
    renderTo: Ext.getBody()
});

Available since: 2.3.0

Defined By

Config options

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: 4.0.6

Ext.layout.container.Card
view source
: Boolean
True to render each contained item at the time it becomes active, false to render all contained items as soon as the ...

True to render each contained item at the time it becomes active, false to render all contained items as soon as the layout is rendered (defaults to false). If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.

Defaults to: false

Available since: 2.3.0

End Definitions ...

End Definitions

Defaults to: Ext.baseCSSPrefix + 'fit-item'

Available since: 4.0.0

Overrides: Ext.layout.container.Container.itemCls, Ext.layout.container.Fit.itemCls

One of the following values: 0 if the layout should ignore overflow. ...

One of the following values:

  • 0 if the layout should ignore overflow.
  • 1 if the layout should be rerun if scrollbars are needed.
  • 2 if the layout should also correct padding when overflowed.

Defaults to: 0

Available since: 4.1.0

Set to true to leave space for a vertical scrollbar (if the OS shows space-consuming scrollbars) regardless of whethe...

Set to true to leave space for a vertical scrollbar (if the OS shows space-consuming scrollbars) regardless of whether a scrollbar is needed.

This is useful if content height changes during application usage, but you do not want the calculated width of child items to change when a scrollbar appears or disappears. The scrollbar will appear in the reserved space, and the calculated width of child Components will not change.

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'rating', type: 'int'},
       {name: 'salary', type: 'float'},
       {name: 'name'}
    ]
});

function createFakeData(count) {
    var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
        lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
        ratings      = [1, 2, 3, 4, 5],
        salaries     = [100, 400, 900, 1500, 1000000];

    var data = [];
    for (var i = 0; i < (count || 25); i++) {
        var ratingId    = Math.floor(Math.random() * ratings.length),
            salaryId    = Math.floor(Math.random() * salaries.length),
            firstNameId = Math.floor(Math.random() * firstNames.length),
            lastNameId  = Math.floor(Math.random() * lastNames.length),

            rating      = ratings[ratingId],
            salary      = salaries[salaryId],
            name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

        data.push({
            rating: rating,
            salary: salary,
            name: name
        });
    }
    store.loadData(data);
}

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    id: 'store',
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});
createFakeData(10);

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Grid loaded with varying number of records',
    anchor: '100%',
    store: store,
    columns: [{
        xtype: 'rownumberer',
        width: 40,
        sortable: false
    },{
        text: 'Name',
        flex: 1,
        sortable: true,
        dataIndex: 'name'
    },{
        text: 'Rating',
        width: 125,
        sortable: true,
        dataIndex: 'rating'
    },{
        text: 'Salary',
        width: 125,
        sortable: true,
        dataIndex: 'salary',
        align: 'right',
        renderer: Ext.util.Format.usMoney
    }]
});

Ext.create('Ext.panel.Panel', {
    renderTo: document.body,
    width: 800,
    height: 600,
    layout: {
        type: 'anchor',
        reserveScrollbar: true // There will be a gap even when there's no scrollbar
    },
    autoScroll: true,
    items: grid,
    tbar: {
        defaults: {
            handler: function(b) {
                createFakeData(b.count);
            }
        },
        items: [{
             text: '10 Items',
             count: 10
        },{
             text: '100 Items',
             count: 100
        },{
             text: '300 Items',
             count: 300
        },{
             text: '1000 Items',
             count: 1000
        },{
             text: '5000 Items',
             count: 5000
        }]
    }
});

Defaults to: false

Available since: 4.1.0

Properties

Defined By

Instance properties

...

Defaults to: 'Ext.Base'

Available since: 4.1.1

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: {setsWidth: 0, setsHeight: 0}

Available since: 4.1.0

...

Defaults to: ['overflowPadderEl']

Available since: 4.1.0

Overrides: Ext.util.ElementContainer.childEls

...

Defaults to: {}

Available since: 4.1.1

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

Returns flags indicating cross-browser handling of scrollHeight/Width. ...

Returns flags indicating cross-browser handling of scrollHeight/Width. In particular, IE has issues with padding-bottom in a scrolling element (it does not include that padding in the scrollHeight). Also, margin-bottom on a child in a scrolling element can be lost.

All browsers seem to ignore margin-right on children and padding-right on the parent element (the one with the overflow)

This method returns a number with the follow bit positions set based on things not accounted for in scrollHeight and scrollWidth:

  • 1: Scrolling element's padding-bottom is not included in scrollHeight.
  • 2: Last child's margin-bottom is not included in scrollHeight.
  • 4: Scrolling element's padding-right is not included in scrollWidth.
  • 8: Child's margin-right is not included in scrollWidth.

To work around the margin-bottom issue, it is sufficient to create a 0px tall last child that will "hide" the margin. This can also be handled by wrapping the children in an element, again "hiding" the margin. Wrapping the elements is about the only way to preserve their right margins. This is the strategy used by Column layout.

To work around the padding-bottom problem, since it is comes from a style on the parent element, about the only simple fix is to create a last child with height equal to padding-bottom. To preserve the right padding, the sizing element needs to have a width that includes the right padding.

Available since: 4.1.0

Ext.layout.container.Card
view source
: Booleanprivate
...

Defaults to: true

Available since: 4.0.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: 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

Begin with no previous adjustments ...

Begin with no previous adjustments

Defaults to: {width: 0, height: 0}

Available since: 4.1.0

...

Defaults to: true

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: ['{%this.renderBody(out,values)%}']

Available since: 4.1.0

...

Defaults to: false

Available since: 4.1.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: {0: {setsWidth: 0, setsHeight: 0}, 1: {setsWidth: 1, setsHeight: 0}, 2: {setsWidth: 0, setsHeight: 1}, 3: {setsWidth: 1, setsHeight: 1}}

Available since: 4.1.0

...

Defaults to: Ext.baseCSSPrefix + 'layout-fit'

Available since: 4.0.0

Ext.layout.container.Card
view source
: Stringprivate
End Definitions ...

End Definitions

Defaults to: 'card'

Available since: 3.4.0

Overrides: Ext.layout.container.Fit.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

    Placeholder empty functions for subclasses to extend ...

    Placeholder empty functions for subclasses to extend

    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

      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

      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

      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.Layout.beginLayout, 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

              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

                ...

                Available since: 4.1.0

                Parameters

                ( ownerContext, containerSize, dimensions )
                Handles overflow processing for a container. ...

                Handles overflow processing for a container. This should be called once the layout has determined contentWidth/Height. In addition to the ownerContext passed to the calculate method, this method also needs the containerSize (the object returned by getContainerSize).

                Available since: 4.1.0

                Parameters

                • ownerContext : Ext.layout.ContextItem
                • containerSize : Object
                • dimensions : Number

                  A bit mask for the overflow managed dimensions. The 0-bit is for width and the 1-bit is for height. In other words, a value of 1 would be only width, 2 would be only height and 3 would be both.

                Fires

                  ( 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

                  ( args ) : Objectprotected
                  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: Ext JS 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

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

                  ...

                  Available since: 4.1.1

                  Ext.layout.container.Card
                  view source
                  ( item )privateprotected
                  . Called before both dynamic render, and bulk render. ...

                  . Called before both dynamic render, and bulk render. Ensure that the active item starts visible, and inactive ones start invisible

                  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

                      Creates an element that makes bottom/right body padding consistent across browsers. ...

                      Creates an element that makes bottom/right body padding consistent across browsers. This element is sized based on the need for scrollbars in calculateOverflow. If the manageOverflow option is false, this element is not created.

                      See getScrollRangeFlags for more details.

                      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

                        ( itemContext, info )private
                        ...

                        Available since: 4.1.0

                        Parameters

                        Fires

                          ...

                          Available since: 4.1.0

                          Parameters

                          Fires

                            ...

                            Available since: 4.1.0

                            Parameters

                            Fires

                              Ext.layout.container.Card
                              view source
                              ( ) : Ext.Component
                              Return the active (visible) component in the layout. ...

                              Return the active (visible) component in the layout.

                              Available since: 4.0.0

                              Returns

                              Fires

                                ...

                                Available since: 4.1.0

                                Ext.layout.container.Card
                                view source
                                ( newCard, owner )private
                                ...

                                Available since: 4.0.0

                                Parameters

                                ...

                                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.

                                    If the calculateOverflow method is used and if manageOverflow is true, this may adjust the width/height by the size of scrollbars.

                                    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

                                    Returns the element into which extra functional DOM elements can be inserted. ...

                                    Returns the element into which extra functional DOM elements can be inserted. Defaults to the owner Component's encapsulating element.

                                    May be overridden in Component layout managers which implement a component render target which must only contain child components.

                                    Available since: 4.1.0

                                    Returns

                                    Fires

                                      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

                                      • Object

                                        An object describing the sizing done by the layout for this item or null if the layout mimics the size policy of its ownerCt (e.g., 'fit' and 'card').

                                        • readsWidth : Boolean

                                          True if the natural/auto width of this component is used by the ownerLayout.

                                        • readsHeight : Boolean

                                          True if the natural/auto height of this component is used by the ownerLayout.

                                        • setsWidth : Boolean

                                          True if the ownerLayout set this component's width.

                                        • setsHeight : Boolean

                                          True if the ownerLayout set this component's height.

                                      Overrides: Ext.layout.Layout.getItemSizePolicy, Ext.layout.container.Fit.getItemSizePolicy

                                      ...

                                      Available since: 4.1.0

                                      Parameters

                                      Fires

                                        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

                                        Ext.layout.container.Card
                                        view source
                                        ( ) : Ext.Component
                                        Return the active (visible) component in the layout to the next card ...

                                        Return the active (visible) component in the layout to the next card

                                        Available since: 4.0.0

                                        Returns

                                        Fires

                                          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

                                          Ext.layout.container.Card
                                          view source
                                          ( ) : Ext.Component
                                          Return the active (visible) component in the layout to the previous card ...

                                          Return the active (visible) component in the layout to the previous card

                                          Available since: 4.0.0

                                          Returns

                                          Fires

                                            ...

                                            Available since: 4.1.0

                                            Returns the element into which rendering must take place. ...

                                            Returns the element into which rendering must take place. Defaults to the owner Container's target element.

                                            May be overridden in layout managers which implement an inner element.

                                            Available since: 4.0.0

                                            Returns

                                            ...

                                            Available since: 4.1.0

                                            Ext.layout.container.Card
                                            view source
                                            ( )private
                                            ...

                                            Available since: 4.1.0

                                            Fires

                                              Overrides: Ext.layout.container.Container.getRenderTree

                                              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

                                                  Fires

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

                                                    ...

                                                    Available since: 4.1.0

                                                    Parameters

                                                    ...

                                                    Available since: 4.1.0

                                                    Parameters

                                                    ...

                                                    Available since: 4.1.0

                                                    Parameters

                                                    ...

                                                    Available since: 4.1.0

                                                    Ext.layout.container.Card
                                                    view source
                                                    ( 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: 3.4.0

                                                    Parameters

                                                    Fires

                                                      Overrides: Ext.layout.Layout.isValidParent

                                                      ( 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

                                                        Ext.layout.container.Card
                                                        view source
                                                        ( ) : Ext.Component
                                                        Sets the active (visible) component in the layout to the next card ...

                                                        Sets the active (visible) component in the layout to the next card

                                                        Available since: 4.0.0

                                                        Returns

                                                        • Ext.Component

                                                          the activated component or false when nothing activated.

                                                        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

                                                          ( 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

                                                          Ext.layout.container.Card
                                                          view source
                                                          ( component )private
                                                          ...

                                                          Available since: 3.4.0

                                                          Parameters

                                                          Overrides: Ext.layout.Layout.onRemove

                                                          Ext.layout.container.Card
                                                          view source
                                                          ( item )private
                                                          ...

                                                          Available since: 4.0.0

                                                          Parameters

                                                          Fires

                                                            ...

                                                            Available since: 4.1.0

                                                            Parameters

                                                            ...

                                                            Available since: 4.1.0

                                                            Parameters

                                                            Ext.layout.container.Card
                                                            view source
                                                            ( ) : Ext.Component
                                                            Sets the active (visible) component in the layout to the previous card ...

                                                            Sets the active (visible) component in the layout to the previous card

                                                            Available since: 4.0.0

                                                            Returns

                                                            • Ext.Component

                                                              the activated component or false when nothing activated.

                                                            Fires

                                                              ...

                                                              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

                                                                Ext.layout.container.Card
                                                                view source
                                                                ( )private
                                                                ...

                                                                Available since: 4.0.3

                                                                Fires

                                                                  Overrides: Ext.layout.Layout.renderChildren

                                                                  ( 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

                                                                    ( 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

                                                                      Ext.layout.container.Card
                                                                      view source
                                                                      ( newCard ) : Ext.Component
                                                                      Makes the given card active. ...

                                                                      Makes the given card active.

                                                                      var card1 = Ext.create('Ext.panel.Panel', {itemId: 'card-1'});
                                                                      var card2 = Ext.create('Ext.panel.Panel', {itemId: 'card-2'});
                                                                      var panel = Ext.create('Ext.panel.Panel', {
                                                                          layout: 'card',
                                                                          activeItem: 0,
                                                                          items: [card1, card2]
                                                                      });
                                                                      // These are all equivalent
                                                                      panel.getLayout().setActiveItem(card2);
                                                                      panel.getLayout().setActiveItem('card-2');
                                                                      panel.getLayout().setActiveItem(1);
                                                                      

                                                                      Available since: 2.3.0

                                                                      Parameters

                                                                      Returns

                                                                      • Ext.Component

                                                                        the activated component or false when nothing activated. False is returned also when trying to activate an already active card.

                                                                      Fires

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

                                                                        Available since: 4.0.0

                                                                        Parameters

                                                                        Returns

                                                                        ...

                                                                        Available since: 4.1.0

                                                                        Parameters

                                                                        ...

                                                                        Available since: 4.1.0

                                                                        Parameters

                                                                        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

                                                                        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 )chainableprivatestatic
                                                                        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