Ext JS 4.0.7 Sencha Docs

Ext.layout.container.Fit

Alternate names

Ext.layout.FitLayout

Hierarchy

Requires

Subclasses

Files

This is a base class for layouts that contain a single item that automatically expands to fill the layout's container. This class is intended to be extended or created via the layout: 'fit' Ext.container.Container.layout config, and should generally not need to be created directly via the new keyword.

Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using Fit layout, simply set layout: 'fit' on the container and add a single panel to it. If the container has multiple panels, only the first one will be displayed.

Ext.create('Ext.panel.Panel', {
    title: 'Fit Layout',
    width: 300,
    height: 150,
    layout:'fit',
    items: {
        title: 'Inner Panel',
        html: 'This is the inner panel content',
        bodyPadding: 20,
        border: false
    },
    renderTo: Ext.getBody()
});

Available since: 2.3.0

Defined By

Config options

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

Flag to notify the ownerCt Container on afterLayout of a change ...

Flag to notify the ownerCt Container on afterLayout of a change

Defaults to: false

Available since: 4.0.0

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

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

Available since: 4.0.6

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.

Available since: 4.0.0

End Definitions ...

End Definitions

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

Available since: 4.0.0

Overrides: Ext.layout.container.AbstractContainer.itemCls

Defined By

Properties

Available since: 4.0.0

...

Defaults to: false

Available since: 4.0.0

End Definitions ...

End Definitions

Defaults to: true

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

...

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

Available since: 4.0.0

End Definitions ...

End Definitions

Defaults to: 'fit'

Available since: 4.0.0

Overrides: Ext.layout.container.AbstractContainer.type

Methods

Defined By

Instance methods

...

Available since: 4.0.0

Parameters

Returns

...

Available since: 4.0.6

Parameters

Returns

Removes itemCls ...

Removes itemCls

Available since: 4.0.0

Parameters

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

    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

    Ext.layout.container.Fit
    view source
    ( item )private
    Applies itemCls Empty template method ...

    Applies itemCls Empty template method

    Available since: 3.4.0

    Parameters

    Fires

      Overrides: Ext.layout.Layout.configureItem

      Destroys this layout. ...

      Destroys this layout. This is a template method that is empty by default, but should be implemented by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.

      Available since: 4.0.0

      This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

      Fires

        ...

        Available since: 4.0.0

        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

          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

          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

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

            Available since: 4.0.0

            Fires

              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

                ( 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

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

                    Available since: 4.0.0

                    Parameters

                    ...

                    Available since: 4.0.0

                    Fires

                      End Definitions ...

                      End Definitions

                      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.Fit
                          view source
                          ( )private
                          Placeholder empty functions for subclasses to extend ...

                          Placeholder empty functions for subclasses to extend

                          Available since: 2.3.0

                          Fires

                            Overrides: Ext.layout.Layout.onLayout

                            ...

                            Available since: 4.0.0

                            ( 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

                                ( 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

                                • 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

                                  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

                                      Ext.layout.container.Fit
                                      view source
                                      ( item, box )private
                                      ...

                                      Available since: 4.0.0

                                      Parameters

                                      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

                                        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