Ext.layout.container.Container
Alternate names
Ext.layout.ContainerLayoutHierarchy
Ext.BaseExt.layout.LayoutExt.layout.container.AbstractContainerExt.layout.container.ContainerSubclasses
Files
This class is intended to be extended or created via the layout configuration property. See Ext.container.Container.layout for additional details.
Available since: 2.3.0
Config options
Flag to notify the ownerCt Component on afterLayout of a change
Defaults to: false
Available since: 4.0.0
Flag to notify the ownerCt Container on afterLayout of a change
Defaults to: false
Available since: 4.0.0
An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See Ext.Component.componentCls also.
Available since: 4.0.0
Properties
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
Methods
Instance Methods beforeLayout( )Containers should not lay out child components when collapsed. ...Containers should not lay out child components when collapsed.
Available since: 4.0.0
Overrides: Ext.layout.container.AbstractContainer.beforeLayout
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
configureItem( )privateApplies itemCls
Empty template method ...Applies itemCls
Empty template method
Available since: 4.0.0
destroy( )templateDestroys 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.
getLayoutItems( ) : Ext.Component[]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
- Ext.Component[]
of child components
Overrides: Ext.layout.Layout.getLayoutItems
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
getVisibleItems( ) : ArrayprotectedReturns all items that are both rendered and visible ...Returns all items that are both rendered and visible
Available since: 4.0.0
Returns
- Array
All matching items
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
- config : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
initLayout( )privateAdds 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
isValidParent( item, target, position )private layoutItem( item, box )private mixin( name, cls )private moveItem( item, target, position )private onLayout( )privatePlaceholder empty functions for subclasses to extend ...Placeholder empty functions for subclasses to extend
Available since: 4.0.0
renderItem( item, target, position )privateRenders 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
renderItems( items, target )private setItemSize( item, width, height )private 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
Containers should not lay out child components when collapsed.
Available since: 4.0.0
Overrides: Ext.layout.container.AbstractContainer.beforeLayout
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
argumentsobject
Returns
- Object
Returns the result after calling the overridden method
Call the parent's overridden method. For example:
Ext.define('My.own.A', {
constructor: function(test) {
alert(test);
}
});
Ext.define('My.own.B', {
extend: 'My.own.A',
constructor: function(test) {
alert(test);
this.callParent([test + 1]);
}
});
Ext.define('My.own.C', {
extend: 'My.own.B',
constructor: function() {
alert("Going to call parent's overriden constructor...");
this.callParent(arguments);
}
});
var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
// alerts '2', then alerts '3'
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject from the current method, for example:this.callParent(arguments)
Returns
- Object
Returns the result from the superclass' method
Applies itemCls Empty template method
Available since: 4.0.0
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.
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
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 both rendered and visible
Available since: 4.0.0
Returns
- Array
All matching items
Initialize configuration for this class. a typical example:
Ext.define('My.awesome.Class', {
// The default config
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
return this;
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
Available since: 4.0.0
Parameters
- config : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
Adds the layout's targetCls if necessary and sets initialized flag when complete.
Available since: 4.0.0
Placeholder empty functions for subclasses to extend
Available since: 4.0.0
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
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
Static Methods 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
- members : Object
Returns
- Ext.Base
this
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
- Ext.Base
this
Create a new instance of this Class. ...Create a new instance of this Class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
All parameters are passed to the constructor of the class.
Available since: 4.0.2
Returns
- Object
the created instance.
createAlias( alias, origin )staticCreate 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
- alias : String/Object
The new method name, or an object to set multiple aliases. See
flexSetter
- origin : String/Object
The original method name
Get the current class' name in string format. ...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
implement( members )staticAdd 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 : Object
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
- members : Object
Returns
- Ext.Base
this
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
Borrow another class' members to the prototype of this class.
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
Available since: 4.0.2
Parameters
- fromClass : Ext.Base
The class to borrow members from
- members : String/String[]
The names of the members to borrow
Returns
- Ext.Base
this
Create a new instance of this Class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
All parameters are passed to the constructor of the class.
Available since: 4.0.2
Returns
- Object
the created instance.
Create aliases for existing prototype methods. Example:
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
Available since: 4.0.2
Parameters
- alias : String/Object
The new method name, or an object to set multiple aliases. See flexSetter
- origin : String/Object
The original method name
Get the current class' name in string format.
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
Available since: 4.0.4
Returns
- String
className
Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
Available since: 4.0.2
Parameters
- members : Object
Override prototype members of this class. Overridden methods can be invoked via callOverridden
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
this