Ext.layout.container.Column

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

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

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

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

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

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

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

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

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

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

Defaults to: false

Available since: 4.1.0

An object which contains boolean properties specifying which properties are to be animated upon flush of child Component ContextItems. For example, Accordion would have:

 {
     y: true,
     height: true
 }

Available since: 4.1.0

Defaults to: {setsWidth: 0, setsHeight: 0}

Available since: 4.1.0

Defaults to: {}

Available since: 4.1.1

Used only during a layout run, this value indicates that a layout has finished its calculations. This flag is set to true prior to the call to calculate and should be set to false if this layout has more work to do.

Available since: 4.1.0

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

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

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

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

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

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

Available since: 4.1.0

Defaults to: []

Available since: 4.1.1

Defaults to: {}

Available since: 4.1.1

Defaults to: false

Available since: 4.0.0

Defaults to: true

Available since: 4.1.1

true in this class to identify an object as an instantiated Layout, or subclass thereof.

Defaults to: true

Available since: 4.0.0

Begin with no previous adjustments

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

Available since: 4.1.0

The element used to correct body padding during overflow.

Available since: 4.1.0

Defaults to: false

Available since: 4.1.0

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

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

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

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

Defaults to: true

Available since: 4.1.0

Defaults to: true

Available since: 4.1.0

Defaults to: true

Available since: 4.1.0

Defaults to: true

Available since: 4.1.0

Adds each argument passed to this method to the childEls array.

Available since: 4.1.0

Removes layout's itemCls and owning Container's itemCls. Clears the managed dimensions flags

Available since: 4.0.0

Parameters

• item : Object

Placeholder empty functions for subclasses to extend

Available since: 4.1.0

Sets references to elements inside the component.

Available since: 4.1.0

Parameters

• el : Object
• id : Object

Called by an owning Panel before the Panel begins its collapse process. Most layouts will not need to override the default Ext.emptyFn implementation.

Available since: 4.1.0

Called by an owning Panel before the Panel begins its expand process. Most layouts will not need to override the default Ext.emptyFn implementation.

Available since: 4.1.0

Called before any calculation cycles to reset DOM values and prepare for calculation.

This is a write phase and DOM reads should be strictly avoided when overridding this method.

Available since: 4.1.0

Parameters

• ownerContext : Ext.layout.ContextItem

  The context item for the layout's owner component.

Overrides: Ext.layout.Layout.beginLayoutCycle

Available since: 4.1.0

Parameters

• ownerContext : Object

Available since: 4.1.0

Available since: 4.1.0

Parameters

• ownerContext : Object
• dimensions : Object

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

Available since: 4.1.0

Parameters

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

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

Call the original method that was previously overridden with override

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

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

        this.callOverridden();

        alert("Meeeeoooowwww");
    }
});

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

Available since: 4.0.0

Parameters

• args : Array/Arguments

  The arguments, either an array or the arguments object from the current method, for example: this.callOverridden(arguments)

Returns

• Object

  Returns the result of calling the overridden method

Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

 Ext.define('My.Base', {
     constructor: function (x) {
         this.x = x;
     },

     statics: {
         method: function (x) {
             return x;
         }
     }
 });

 Ext.define('My.Derived', {
     extend: 'My.Base',

     constructor: function () {
         this.callParent([21]);
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // alerts 21

This can be used with an override as follows:

 Ext.define('My.DerivedOverride', {
     override: 'My.Derived',

     constructor: function (x) {
         this.callParent([x*2]); // calls original My.Derived constructor
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // now alerts 42

This also works with static methods.

 Ext.define('My.Derived2', {
     extend: 'My.Base',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // calls My.Base.method
         }
     }
 });

 alert(My.Base.method(10);     // alerts 10
 alert(My.Derived2.method(10); // alerts 20

Lastly, it also works with overridden static methods.

 Ext.define('My.Derived2Override', {
     override: 'My.Derived2',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // calls My.Derived2.method
         }
     }
 });

 alert(My.Derived2.method(10); // now alerts 40

To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

Available since: 4.0.0

Parameters

• args : Array/Arguments

  The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

Returns

• Object

  Returns the result of calling the parent method

This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.

Consider:

 Ext.define('Ext.some.Class', {
     method: function () {
         console.log('Good');
     }
 });

 Ext.define('Ext.some.DerivedClass', {
     method: function () {
         console.log('Bad');

         // ... logic but with a bug ...

         this.callParent();
     }
 });

To patch the bug in DerivedClass.method, the typical solution is to create an override:

 Ext.define('App.paches.DerivedClass', {
     override: 'Ext.some.DerivedClass',

     method: function () {
         console.log('Fixed');

         // ... logic but with bug fixed ...

         this.callSuper();
     }
 });

The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good".

Available since: Ext JS 4.1.3

Parameters

• args : Array/Arguments

  The arguments, either an array or the arguments object from the current method, for example: this.callSuper(arguments)

Returns

• Object

  Returns the result of calling the superclass method

This method (if implemented) is called at the end of the cycle in which this layout completes (by not setting done to false in calculate). It is possible for the layout to complete and yet become invalid before the end of the cycle, in which case, this method will not be called. It is also possible for this method to be called and then later the layout becomes invalidated. This will result in calculate being called again, followed by another call to this method.

This is a read phase and DOM writes should be strictly avoided in derived classes. Instead, DOM writes need to be written to Ext.layout.ContextItem objects to be flushed at the next opportunity.

This method need not be implemented by derived classes and, in fact, should only be implemented when needed.

Available since: 4.1.0

Parameters

• ownerContext : Ext.layout.ContextItem

  The context item for the layout's owner component.

Overrides: Ext.layout.Layout.completeLayout

Available since: 4.1.1

Adds layout's itemCls and owning Container's itemCls

Available since: 3.4.0

Parameters

• item : Object

Overrides: Ext.layout.Layout.configureItem

Available since: 3.4.0

Overrides: Ext.util.ElementContainer.destroy

Available since: 4.1.0

Parameters

• out : Object
• renderData : Object

Available since: 4.1.0

Parameters

• out : Object
• renderData : Object

Available since: 4.1.0

Parameters

• out : Object
• renderData : Object

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

See getScrollRangeFlags for more details.

Available since: 4.1.0

Parameters

• out : Object
• renderData : Object

This method (if implemented) is called after all layouts have completed. In most ways this is similar to completeLayout. This call can cause this (or any layout) to be become invalid (see Ext.layout.Context.invalidate), but this is best avoided. This method is intended to be where final reads are made and so it is best to avoid invalidating layouts at this point whenever possible. Even so, this method can be used to perform final checks that may require all other layouts to be complete and then invalidate some results.

This is a read phase and DOM writes should be strictly avoided in derived classes. Instead, DOM writes need to be written to Ext.layout.ContextItem objects to be flushed at the next opportunity.

This method need not be implemented by derived classes and, in fact, should only be implemented when needed.

Available since: 4.1.0

Parameters

• ownerContext : Ext.layout.ContextItem

  The context item for the layout's owner component.

Available since: 4.1.0

Overrides: Ext.layout.Layout.finishRender

Available since: 4.1.0

Parameters

• target : Object
• items : Object

Available since: 4.1.0

Available since: 4.1.0

Available since: 4.1.0

Parameters

• cls : Object

Available since: 4.1.0

Parameters

• name : Object

Returns the container size (that of the target). Only the fixed-sized dimensions can be returned because the shrinkWrap dimensions are based on the contentWidth/Height as determined by the container layout.

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

Available since: 4.1.0

Parameters

• ownerContext : Ext.layout.ContextItem

  The owner's context item.

• inDom : Boolean (optional)

  True if the container size must be in the DOM.

  Defaults to: false

Returns

• Object

  The size

  • width : Number

    The width

  • height : Number

    The height

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

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

Available since: 4.1.0

Returns

• Ext.Element

Returns the initial configuration passed to constructor when instantiating this class.

Available since: 4.1.0

Parameters

• name : String (optional)

  Name of the config option to return.

Returns

• Object/Mixed

  The full config object or a single config value when name parameter specified.

Available since: 4.1.0

Parameters

• items : Object
• renderCfgs : Object

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

This method is used to offset the DOM position when checking whether the element is a certain child of the target. This is required in cases where the extra elements prepended to the target before any of the items. An example of this is when using labelAlign: 'top' on a field. The label appears first in the DOM before any child items are created, so when we check the position we need to add an extra offset. Containers that create an innerCt are exempt because this new element preserves the order

Available since: 4.1.2

Parameters

• position : Object

Overrides: Ext.layout.Layout.getPositionOffset

Available since: 4.1.0

Available since: 4.1.0

Available since: 4.1.0

Returns all items that are rendered

Available since: 3.4.0

Returns

• Array

  All matching items

Available since: 4.1.0

Parameters

• width : Object
• height : Object
• contentWidth : Object
• contentHeight : Object

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

Available since: 4.1.0

Parameters

• config : Object

Initialize configuration for this class. a typical example:

Ext.define('My.awesome.Class', {
    // The default config
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

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

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

Available since: 4.0.0

Parameters

• config : Object

Returns

• Ext.Base

  this

A one-time initialization method called just before rendering.

Available since: 4.0.0

Overrides: Ext.layout.Layout.initLayout

Available since: 4.1.0

Parameters

• itemContext : Object

Available since: 4.1.0

Parameters

• item : Object

Available since: 4.1.0

Parameters

• item : Object

Available since: 4.1.0

Validates item is in the proper place in the dom.

Available since: 4.0.0

Parameters

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

Moves Component to the provided target instead.

Available since: 4.0.0

Parameters

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

Called for every layout in the layout context after all the layouts have been finally flushed

Available since: 4.1.0

Overrides: Ext.layout.Layout.notifyOwner

Available since: 4.1.0

Available since: 4.1.0

Parameters

• names : Object
• callback : Object
• scope : Object

This method is called when a child item changes in some way. By default this calls Ext.AbstractComponent.updateLayout on this layout's owner.

Available since: 4.1.0

Parameters

• child : Ext.Component

  The child item that has changed.

Returns

• Boolean

  True if this layout has handled the content change.

Available since: 4.0.0

Available since: 4.0.0

Available since: 4.1.0

Parameters

• childEls : Object
• shared : Object

Removes items in the childEls array based on the return value of a supplied test function. The function is called with a entry in childEls and if the test function return true, that entry is removed. If false, that entry is kept.

Available since: 4.1.0

Parameters

• testFn : Function

  The test function.

Available since: 4.0.3

Renders the given Component into the target Element.

Available since: 4.0.0

Parameters

• item : Ext.Component

  The Component to render

• target : Ext.dom.Element

  The target Element

• position : Number

  The position within the target to render the item to

Iterates over all passed items, ensuring they are rendered. If the items are already rendered, also determines if the items are in the proper place in the dom.

Available since: 4.0.0

Parameters

• items : Object
• target : Object

Available since: 4.0.0

Parameters

• config : Object
• applyIfNotSet : Object

Returns

• Ext.Base

  this

Sets the layout owner

Available since: 4.0.0

Parameters

• owner : Object

Available since: 4.1.0

Parameters

• renderTpl : Object

Available since: 4.1.0

Parameters

• items : Object
• reverseProp : 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++;
    },

    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

Available since: 4.1.0

Available since: 4.1.1

Parameters

• members : Object

Available since: 4.1.1

Parameters

• name : Object
• member : Object

Add methods / properties to the prototype of this class.

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

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

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

Available since: 4.1.0

Parameters

• members : Object

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

• members : Object

Returns

• Ext.Base

  this

Available since: 4.1.1

Parameters

• xtype : Object

Borrow another class' members to the prototype of this class.

Ext.define('Bank', {
    money: '$$$',
    printMoney: function() {
        alert('$$$$$$$');
    }
});

Ext.define('Thief', {
    ...
});

Thief.borrow(Bank, ['money', 'printMoney']);

var steve = new Thief();

alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'

Available since: 4.0.2

Parameters

• fromClass : Ext.Base

  The class to borrow members from

• members : Array/String

  The names of the members to borrow

Returns

• 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

Available since: 4.1.1

Parameters

• config : Object

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

Adds members to class.

Available since: 4.0.2

Used internally by the mixins pre-processor

Available since: 4.1.1

Parameters

• name : Object
• mixinClass : Object

Available since: 4.1.1

Parameters

• fn : Object
• scope : Object

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

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

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

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

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

As of 4.1, direct use of this method is deprecated. Use Ext.define instead:

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

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).

Available since: 4.0.2

Parameters

• members : Object

  The properties to add to this class. This should be specified as an object literal containing one or more properties.

Returns

• Ext.Base

  this class

Available since: 4.1.1