Ext.util.Bindable
Hierarchy
Ext.BaseExt.util.BindableMixed into
Files
This class is used as a mixin.
This class is to be used to provide basic methods for binding/unbinding stores to other classes. In general it will not be used directly.
Available since: 4.1.0
Properties
Instance Properties 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'
},
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
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
Static Properties
Methods
Instance Methods bindStore( [store], [initial] )Binds a store to this instance. ...Binds a store to this instance.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore/String (optional)
The store to bind or ID of the store.
When no store given (or when null or undefined passed), unbinds the existing store.
- initial : Boolean (optional)
True to not remove listeners from existing store.
Defaults to: false
bindStoreListeners( store )protectedBinds listeners for this component to the store. ...Binds listeners for this component to the store. By default it will add
anything bound by the getStoreListeners method, however it can be overridden
in a subclass to provide any more complicated handling.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore
The store to bind to
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!");
}
});
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"
This method has been deprecated
as of 4.1. Use callParent instead.
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. ...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 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
destroy( )private ...
Available since: 4.1.1
Overrides: Ext.util.ElementContainer.destroy, Ext.AbstractComponent.destroy, Ext.AbstractPlugin.destroy
Gets the current store instance. ...Gets the current store instance.
Available since: 4.1.0
Returns
- Ext.data.AbstractStore
The store, null if one does not exist.
Gets the listeners to bind to a new store. ...Gets the listeners to bind to a new store.
Available since: 4.1.0
Parameters
- store : Ext.data.Store
The Store which is being bound to for which a listeners object should be returned.
Returns
- Object
The listeners to be bound to the store in object literal form. The scope
may be omitted, it is assumed to be the current instance.
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);
}
});
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
onBindStore( store, initial )protectedTemplate method, it is called when a new store is bound
to the current instance. ...Template method, it is called when a new store is bound
to the current instance.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore
The store being bound
- initial : Boolean
True if this store is being bound as initialization of the instance.
onConfigUpdate( names, callback, scope )private onUnbindStore( store, initial )protectedTemplate method, it is called when an existing store is unbound
from the current instance. ...Template method, it is called when an existing store is unbound
from the current instance.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore
The store being unbound
- initial : Boolean
True if this store is being bound as initialization of the instance.
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++;
},
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
unbindStoreListeners( store )protectedUnbinds listeners from this component to the store. ...Unbinds listeners from this component to the store. By default it will remove
anything bound by the bindStoreListeners method, however it can be overridden
in a subclass to provide any more complicated handling.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore
The store to unbind from
Binds a store to this instance.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore/String (optional)
The store to bind or ID of the store. When no store given (or when
nullorundefinedpassed), unbinds the existing store. - initial : Boolean (optional)
True to not remove listeners from existing store.
Defaults to:
false
Binds listeners for this component to the store. By default it will add anything bound by the getStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore
The store to bind to
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"
This method has been deprecated
as of 4.1. Use callParent instead.
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject 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
argumentsobject 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
argumentsobject from the current method, for example:this.callSuper(arguments)
Returns
- Object
Returns the result of calling the superclass method
Available since: 4.1.1
Overrides: Ext.util.ElementContainer.destroy, Ext.AbstractComponent.destroy, Ext.AbstractPlugin.destroy
Gets the current store instance.
Available since: 4.1.0
Returns
- Ext.data.AbstractStore
The store, null if one does not exist.
Gets the listeners to bind to a new store.
Available since: 4.1.0
Parameters
- store : Ext.data.Store
The Store which is being bound to for which a listeners object should be returned.
Returns
- Object
The listeners to be bound to the store in object literal form. The scope may be omitted, it is assumed to be the current instance.
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
Template method, it is called when a new store is bound to the current instance.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore
The store being bound
- initial : Boolean
True if this store is being bound as initialization of the instance.
Template method, it is called when an existing store is unbound from the current instance.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore
The store being unbound
- initial : Boolean
True if this store is being bound as initialization of the instance.
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
Unbinds listeners from this component to the store. By default it will remove anything bound by the bindStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling.
Available since: 4.1.0
Parameters
- store : Ext.data.AbstractStore
The store to unbind from
Static Methods addMember( name, member )chainableprivatestatic addMembers( members )chainablestaticAdd 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.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. ...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 : Array/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( )deprecatedstaticAdds members to class. ...Adds members to class.
This method has been deprecated since 4.1
Use addMembers instead.
Available since: 4.0.2
mixin( name, mixinClass )chainableprivatestatic onExtended( fn, scope )chainableprivatestatic Override members of this class. ...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).
This method has been deprecated since 4.1.0
Use Ext.define instead
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
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
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
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.
This method has been deprecated since 4.1
Use addMembers instead.
Available since: 4.0.2
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).
This method has been deprecated since 4.1.0
Use Ext.define instead
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