Ext.layout.container.HBox

If truthy, child Component are animated into position whenever the Container is layed out. If this option is numeric, it is used as the animation duration in milliseconds.

May be set as a property at any time.

Available since: 4.0.0

Flag to notify the ownerCt Component on afterLayout of a change

Defaults to: false

Available since: 4.0.0

Flag to notify the ownerCt Container on afterLayout of a change

Defaults to: true

Available since: 4.0.0

Overrides: Ext.layout.container.AbstractContainer.bindToOwnerCtContainer

Defaults to: false

Available since: 4.0.0

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:

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

Available since: 3.4.0

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

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'

Available since: 4.0.0

Overrides: Ext.layout.container.AbstractContainer.itemCls

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

Available since: 4.0.0

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:

Defaults to: '0'

Available since: 3.4.0

True (the default) to allow fixed size components to shrink (limited to their minimum size) to avoid overflow. False to preserve fixed sizes even if they cause overflow.

Defaults to: true

Available since: 4.0.4

Available since: 4.0.0

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

Defaults to: 0

Available since: 4.0.0

Array of the last calculated height, width, top and left positions of each visible rendered component within the Box layout.

Available since: 3.4.0

Defaults to: false

Available since: 4.0.0

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

Available since: 3.4.0

End Definitions

Defaults to: true

Available since: 4.0.0

Private cache of the last measured size of the layout target. This should never be used except by BoxLayout subclasses during their onLayout run.

Available since: 3.4.0

documented in subclasses

Defaults to: 'start'

Available since: 3.4.0

whether or not to reserve the availableSpaceOffset in layout calculations

Defaults to: true

Available since: 4.0.0

Defaults to: 0

Available since: 3.4.0

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'

        return 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: Ext.baseCSSPrefix + 'box-layout-ct'

Available since: 3.4.0

Available since: 4.0.6

Parameters

• members : Object

Returns

• Ext.Base

  this

Available since: 4.0.0

Overrides: Ext.layout.Layout.afterLayout

Removes itemCls

Available since: 4.0.0

Parameters

• item : Object

Available since: Ext JS 4.0.7

Containers should not lay out child components when collapsed.

Available since: 4.0.0

Overrides: Ext.layout.container.AbstractContainer.beforeLayout

Calculates the size and positioning of the passed child item.

Available since: 4.0.0

Parameters

• child : Ext.Component

  The child Component to calculate the box for

Returns

• Object

  Object containing box measurements for the child. Properties are left,top,width,height.

Calculates the size and positioning of each item in the box. This iterates over all of the rendered, visible items and returns a height, width, top and left for each, as well as a reference to each. Also returns meta data such as maxSize which are useful when resizing layout wrappers such as this.innerCt.

Available since: 4.0.0

Parameters

• visibleItems : Array

  The array of all rendered, visible items to be calculated for

• targetSize : Object

  Object containing target size and height

Returns

• Object

  Object containing box measurements for each child, plus meta data

Call the original method that was previously overridden with override

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");

        return this;
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        var instance = this.callOverridden();

        alert("Meeeeoooowwww");

        return instance;
    }
});

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

Parameters

• args : Array/Arguments

  The arguments, either an array or the arguments object

Returns

• Object

  Returns the result after calling the overridden method

Call the parent's overridden method. For example:

Ext.define('My.own.A', {
    constructor: function(test) {
        alert(test);
    }
});

Ext.define('My.own.B', {
    extend: 'My.own.A',

    constructor: function(test) {
        alert(test);

        this.callParent([test + 1]);
    }
});

Ext.define('My.own.C', {
    extend: 'My.own.B',

    constructor: function() {
        alert("Going to call parent's overriden constructor...");

        this.callParent(arguments);
    }
});

var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
                         // alerts '2', then alerts '3'

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 from the superclass' method

Available since: 3.4.0

Overrides: Ext.layout.Layout.destroy

Available since: 4.0.0

Available since: 4.0.0

Parameters

• a : Object
• b : Object

Returns the current size and positioning of the passed child item.

Available since: 4.0.0

Parameters

• child : Ext.Component

  The child Component to calculate the box for

Returns

• Object

  Object containing box measurements for the child. Properties are left,top,width,height.

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

• Ext.Component[]

  of child components

Overrides: Ext.layout.Layout.getLayoutItems

Available since: 4.0.0

Overridden method from AbstractContainer. Used in the base AbstractLayout.beforeLayout method to render all items into.

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

• Ext.Element

Overrides: Ext.layout.container.AbstractContainer.getRenderTarget

Returns all items that are rendered

Available since: 3.4.0

Returns

• Array

  All matching items

Returns the owner component's resize element.

Available since: 4.0.0

Returns

• Ext.Element

Returns all items that are both rendered and visible

Available since: 4.0.0

Returns

• Array

  All matching items

This should be called after onLayout of any BoxLayout subclass. If the target's overflow is not set to 'hidden', we need to lay out a second time because the scrollbars may have modified the height and width of the layout target. Having a Box layout inside such a target is therefore not recommended.

Available since: 3.4.0

Parameters

• previousTargetSize : Object

  The size and height of the layout target before we just laid out

• container : Ext.container.Container

  The container

• target : Ext.Element

  The target element

Returns

• Object

  True if the layout overflowed, and was reflowed in a secondary onLayout call.

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

        return this;
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName()); // 'Super Awesome'

Available since: 4.0.0

Parameters

• config : Object

Returns

• Object

  mixins The mixin prototypes as key - value pairs

Adds the layout's targetCls if necessary and sets initialized flag when complete.

Available since: 4.0.0

Available since: 4.0.0

private

Available since: 3.4.0

Parameters

• item : Object
• target : Object
• position : Object

Overrides: Ext.layout.Layout.isValidParent

Available since: 4.0.0

End Definitions

Available since: 4.0.0

Parameters

• item : Object
• box : Object

Sort into descending order.

Available since: 4.0.0

Parameters

• a : Object
• b : Object

Used internally by the mixins pre-processor

Available since: 4.0.6

Parameters

• name : Object
• cls : Object

Moved Component to the provided target instead.

Available since: 4.0.0

Parameters

• item : Object
• target : Object
• position : Object

Available since: 4.0.0

Runs the child box calculations and caches them in childBoxCache. Subclasses can used these cached values when laying out

Available since: 3.4.0

Overrides: Ext.layout.Layout.onLayout

Available since: 3.4.0

Parameters

• comp : Object

Overrides: Ext.layout.Layout.onRemove

Available since: 4.0.6

Parameters

• name : Object
• value : Object

Available since: 4.0.0

Parameters

• name : Object
• fn : Object

Available since: 4.0.3

private

Renders the given Component into the target Element.

Available since: 3.4.0

Parameters

• item : Ext.Component

  The Component to render

• target : Ext.Element

  The target Element

• position : Number

  The position within the target to render the item to

Overrides: Ext.layout.Layout.renderItem

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 dom.

Available since: 4.0.0

Parameters

• items : Object
• target : Object

Available since: 4.0.0

Parameters

• config : Object

Returns

• Ext.Base

  this

Set the size of an item within the Container. We should always use setCalculatedSize.

Available since: 4.0.0

Parameters

• item : Object
• width : Object
• height : Object

Sets the layout owner

Available since: 4.0.0

Parameters

• owner : Object

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++;

        return this;
    },

    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

• Ext.Class

Resizes and repositions each child component

Available since: 3.4.0

Parameters

• boxes : Object[]

  The box measurements

Called by onRender just before the child components are sized and positioned. This resizes the innerCt to make sure all child items fit within it. We call this before sizing the children because if our child items are larger than the previous innerCt size the browser will insert scrollbars and then remove them again immediately afterwards, giving a performance hit. Subclasses should provide an implementation.

Available since: 3.4.0

Parameters

• currentSize : Object

  The current height and width of the innerCt

• calculations : Object

  The new box calculations of all items to be laid out

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 : String/String[]

  The names of the members to borrow

Returns

• Ext.Base

  this

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

• Object

  the created instance.

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

• alias : String/Object

  The new method name, or an object to set multiple aliases. See flexSetter

• origin : String/Object

  The original method name

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

• String

  className

Add methods / properties to the prototype of this class.

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.implement({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Available since: 4.0.2

Parameters

• members : Object

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

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");

        return this;
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        var instance = this.callOverridden();

        alert("Meeeeoooowwww");

        return instance;
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

Available since: 4.0.2

Parameters

• members : Object

Returns

• Ext.Base

  this