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

Fires

    Overrides: Ext.layout.Layout.constructor, Ext.layout.container.Box.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

    Fires

      Overrides: Ext.layout.container.AbstractContainer.beforeLayout, Ext.layout.container.Container.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.

      Fires

        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

        Fires

          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

          Fires

            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

            ...

            Available since: 4.0.0

            Fires

              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.

              Available since: 4.0.0

              Returns

              Fires

                Overrides: Ext.layout.container.AbstractContainer.getRenderTarget

                Returns all items that are rendered ...

                Returns all items that are rendered

                Available since: 3.4.0

                Returns

                Fires

                  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

                    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.

                    Fires

                      ( 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

                      Fires

                        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

                        Fires

                          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

                          Fires

                            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

                            Fires

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

                              Moved Component to the provided target instead.

                              Available since: 4.0.0

                              Parameters

                              Fires

                                ...

                                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

                                Fires

                                  Overrides: Ext.layout.Layout.onLayout

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

                                  Available since: 3.4.0

                                  Parameters

                                  Fires

                                    Overrides: Ext.layout.Layout.onRemove

                                    ( name, value )private
                                    ...

                                    Available since: 4.0.6

                                    Parameters

                                    Fires

                                      ( name, fn )private
                                      ...

                                      Available since: 4.0.0

                                      Parameters

                                      ...

                                      Available since: 4.0.3

                                      Fires

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

                                        private

                                        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

                                        Fires

                                          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

                                          Fires

                                            ( config ) : Ext.Basechainableprivate
                                            ...

                                            Available since: 4.0.0

                                            Parameters

                                            Returns

                                            Fires

                                              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

                                              Fires

                                                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

                                                Fires

                                                  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

                                                  ( 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