Ext JS 4.0.7 Sencha Docs

Ext.layout.container.Box

Alternate names

Ext.layout.BoxLayout

Hierarchy

Requires

Subclasses

Files

Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.

Available since: 3.4.0

Defined By

Config options

Ext.layout.container.Box
view source
: Boolean/Number/Object
If truthy, child Component are animated into position whenever the Container is layed out. ...

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

Flag to notify the ownerCt Component on afterLayout of a change

Defaults to: false

Available since: 4.0.0

Ext.layout.container.Box
view source
: Boolean
Flag to notify the ownerCt Container on afterLayout of a change ...

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

Ext.layout.container.Box
view source
: Boolean
...

Defaults to: false

Available since: 4.0.0

Ext.layout.container.Box
view source
: Object
If the individual contained items do not have a margins property specified or margin specified via CSS, the default m...

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


This property may be specified as an object containing margins

to apply in the format:

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

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

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

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

Available since: 3.4.0

Ext.layout.container.Box
view source
: Number
This configuration option is to be applied to child items of the container managed by this layout. ...

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

Available since: 4.0.0

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

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

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

Available since: 4.0.0

Overrides: Ext.layout.container.AbstractContainer.itemCls

Ext.layout.container.Box
view source
: String
Controls how the child items of the container are packed together. ...

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

  • start : Default
    child items are packed together at left side of container
  • center :
    child items are packed together at mid-width of container
  • end :
    child items are packed together at right side of container

Available since: 4.0.0

Ext.layout.container.Box
view source
: String
Sets the padding to be applied to all child items managed by this layout. ...

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

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

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

Defaults to: '0'

Available since: 3.4.0

Ext.layout.container.Box
view source
: Boolean
True (the default) to allow fixed size components to shrink (limited to their minimum size) to avoid overflow. ...

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

Defined By

Properties

Available since: 4.0.0

Ext.layout.container.Box
view source
: Numberprivate
availableSpaceOffset is used to adjust the availableWidth, typically used to reserve space for a scrollbar ...

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

Defaults to: 0

Available since: 4.0.0

Ext.layout.container.Box
view source
: Arrayprivate
Array of the last calculated height, width, top and left positions of each visible rendered component within the Box ...

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

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

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

Available since: 3.4.0

End Definitions ...

End Definitions

Defaults to: true

Available since: 4.0.0

Ext.layout.container.Box
view source
: Objectprivate
Private cache of the last measured size of the layout target. ...

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

Ext.layout.container.Box
view source
: Stringprivate
documented in subclasses ...

documented in subclasses

Defaults to: 'start'

Available since: 3.4.0

Ext.layout.container.Box
view source
: Booleanprivate
whether or not to reserve the availableSpaceOffset in layout calculations ...

whether or not to reserve the availableSpaceOffset in layout calculations

Defaults to: true

Available since: 4.0.0

Ext.layout.container.Box
view source
: Numberprivate
...

Defaults to: 0

Available since: 3.4.0

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

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

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

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

        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

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

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

Available since: 3.4.0

End Definitions ...

End Definitions

Defaults to: 'container'

Available since: 4.0.0

Methods

Defined By

Instance Methods

Ext.layout.container.Box
view source
new( config ) : Ext.layout.container.Box
...

Available since: 3.4.0

Parameters

Returns

Overrides: Ext.layout.Layout.constructor

...

Available since: 4.0.6

Parameters

Returns

Removes itemCls ...

Removes itemCls

Available since: 4.0.0

Parameters

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

Available since: Ext JS 4.0.7

Containers should not lay out child components when collapsed. ...

Containers should not lay out child components when collapsed.

Available since: 4.0.0

Overrides: Ext.layout.container.AbstractContainer.beforeLayout

Ext.layout.container.Box
view source
( child ) : Objectprivate
Calculates the size and positioning of the passed child item. ...

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.

Ext.layout.container.Box
view source
( visibleItems, targetSize ) : Objectprivate
Calculates the size and positioning of each item in the box. ...

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: functi...

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

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

Applies itemCls Empty template method ...

Applies itemCls Empty template method

Available since: 4.0.0

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

Available since: 3.4.0

Overrides: Ext.layout.Layout.destroy

...

Available since: 4.0.0

Ext.layout.container.Box
view source
( a, b )private
...

Available since: 4.0.0

Parameters

Ext.layout.container.Box
view source
( child ) : Objectprivate
Returns the current size and positioning of the passed child item. ...

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

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.Box
view source
( ) : Ext.Element
Overridden method from AbstractContainer. ...

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

Overrides: Ext.layout.container.AbstractContainer.getRenderTarget

Returns all items that are rendered ...

Returns all items that are rendered

Available since: 3.4.0

Returns

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

Ext.layout.container.Box
view source
( previousTargetSize, container, target ) : Objectprivate
This should be called after onLayout of any BoxLayout subclass. ...

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

Returns

  • Object

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

( config ) : Objectchainableprotected
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);

        return this;
    }
});

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

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

Available since: 4.0.0

Parameters

Returns

  • Object

    mixins The mixin prototypes as key - value pairs

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

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

Available since: 4.0.0

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

Available since: 4.0.0

Ext.layout.container.Box
view source
( item, target, position )private
private ...

private

Available since: 3.4.0

Parameters

Overrides: Ext.layout.Layout.isValidParent

...

Available since: 4.0.0

End Definitions ...

End Definitions

Available since: 4.0.0

Parameters

Ext.layout.container.Box
view source
( a, b )private
Sort into descending order. ...

Sort into descending order.

Available since: 4.0.0

Parameters

( name, cls )private
Used internally by the mixins pre-processor ...

Used internally by the mixins pre-processor

Available since: 4.0.6

Parameters

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

Moved Component to the provided target instead.

Available since: 4.0.0

Parameters

...

Available since: 4.0.0

Ext.layout.container.Box
view source
( )private
Runs the child box calculations and caches them in childBoxCache. ...

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

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

Available since: 3.4.0

Parameters

Overrides: Ext.layout.Layout.onRemove

( name, value )private
...

Available since: 4.0.6

Parameters

( name, fn )private
...

Available since: 4.0.0

Parameters

...

Available since: 4.0.3

Ext.layout.container.Box
view source
( item, target, position )private
private Renders the given Component into the target Element. ...

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

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

( config ) : Ext.Basechainableprivate
...

Available since: 4.0.0

Parameters

Returns

Set the size of an item within the Container. ...

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

Available since: 4.0.0

Parameters

Sets the layout owner ...

Sets the layout owner

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

        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.layout.container.Box
view source
( boxes )
Resizes and repositions each child component ...

Resizes and repositions each child component

Available since: 3.4.0

Parameters

  • boxes : Object[]

    The box measurements

Ext.layout.container.Box
view source
( currentSize, calculations )private
Called by onRender just before the child components are sized and positioned. ...

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

Defined By

Static Methods

( 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

( fromClass, members ) : Ext.Basechainablestatic
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 : String/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

( 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

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

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.implement({
     meow: function() {
        alert('Meowww...');
     }
 });

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

Available since: 4.0.2

Parameters

( members ) : Ext.Basechainablestatic
Override prototype members of this class. ...

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

Returns