Instance Methods
Adds declarative listeners as nested arrays of listener objects.
:
Boolean
true if any listeners were added
This method applies a versioned, deprecation declaration to this class. This
is typically called by the deprecated config.
The on method is shorthand for
addListener.
Appends an event handler to this object. For example:
myGridPanel.on("itemclick", this.onItemClick, this);
The method also allows for a single argument to be passed which is a config object
containing properties which specify multiple events. For example:
myGridPanel.on({
cellclick: this.onCellClick,
select: this.onSelect,
viewready: this.onViewReady,
scope: this // Important. Ensure "this" is correct during handler execution
});
One can also specify options for each event handler separately:
myGridPanel.on({
cellclick: {fn: this.onCellClick, scope: this, single: true},
viewready: {fn: panel.onViewReady, scope: panel}
});
Names of methods in a specified scope may also be used:
myGridPanel.on({
cellclick: {fn: 'onCellClick', scope: this, single: true},
viewready: {fn: 'onViewReady', scope: panel}
});
eventName :
String/Object
The name of the event to listen for.
May also be an object who's property names are event names.
fn :
Function/String
(optional)
The method the event invokes or the name of
the method within the specified scope. Will be called with arguments
given to Ext.util.Observable#fireEvent plus the options parameter described
below.
scope :
Object
(optional)
The scope (this reference) in which the handler function is
executed. If omitted, defaults to the object which fired the event.
options :
Object
(optional)
An object containing handler configuration.
Note: The options object will also be passed as the last argument to every
event handler.
This object may contain any of the following properties:
scope :
Object
The scope (this reference) in which the handler function is executed. If omitted,
defaults to the object which fired the event.
delay :
Number
The number of milliseconds to delay the invocation of the handler after the event
fires.
single :
Boolean
True to add a handler to handle just the next firing of the event, and then remove
itself.
buffer :
Number
Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed
by the specified number of milliseconds. If the event fires again within that time,
the original handler is not invoked, but the new handler is scheduled in its place.
onFrame :
Number
Causes the handler to be scheduled to run at the next
animation frame event. If the
event fires again before that time, the handler is not rescheduled - the handler
will only be called once when the next animation frame is fired, with the last set
of arguments passed.
target :
Ext.util.Observable
Only call the handler if the event was fired on the target Observable, not if the
event was bubbled up from a child Observable.
element :
String
This option is only valid for listeners bound to Ext.Component.
The name of a Component property which references an Ext.dom.Element
to add a listener to.
This option is useful during Component construction to add DOM event listeners to
elements of Ext.Component which will exist only after the
Component is rendered.
For example, to add a click listener to a Panel's body:
var panel = new Ext.panel.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
In order to remove listeners attached using the element, you'll need to reference
the element itself as seen below.
panel.body.un(...)
delegate :
String
(optional)
A simple selector to filter the event target or look for a descendant of the target.
The "delegate" option is only available on Ext.dom.Element instances (or
when attaching a listener to a Ext.dom.Element via a Component using the
element option).
See the delegate example below.
capture :
Boolean
(optional)
When set to true, the listener is fired in the capture phase of the event propagation
sequence, instead of the default bubble phase.
The capture option is only available on Ext.dom.Element instances (or
when attaching a listener to a Ext.dom.Element via a Component using the
element option).
stopPropagation :
Boolean
(optional)
preventDefault :
Boolean
(optional)
stopEvent :
Boolean
(optional)
This option is only valid for listeners bound to Ext.dom.Element.
true to call stopEvent on the event object
before firing the handler.
args :
Array
(optional)
Optional set of arguments to pass to the handler function before the actual
fired event arguments. For example, if args is set to ['foo', 42],
the event handler function will be called with an arguments list like this:
handler('foo', 42, <actual event arguments>...);
destroyable :
Boolean
(optional)
When specified as true, the function returns a destroyable object. An object
which implements the destroy method which removes all listeners added in this call.
This syntax can be a helpful shortcut to using un; particularly when
removing multiple listeners. NOTE - not compatible when using the element
option. See un for the proper syntax for removing listeners added using the
element config.
Defaults to:
false
priority :
Number
(optional)
An optional numeric priority that determines the order in which event handlers
are run. Event handlers with no priority will be run as if they had a priority
of 0. Handlers with a higher priority will be prioritized to run sooner than
those with a lower priority. Negative numbers can be used to set a priority
lower than the default. Internally, the framework uses a range of 1000 or
greater, and -1000 or lesser for handlers that are intended to run before or
after all others, so it is recommended to stay within the range of -999 to 999
when setting the priority of event handlers in application-level code.
A priority must be an integer to be valid. Fractional values are reserved for
internal framework use.
order :
String
(optional)
A legacy option that is provided for backward compatibility.
It is recommended to use the priority option instead. Available options are:
'before': equal to a priority of 100'current': equal to a priority of 0 or default priority'after': equal to a priority of -100
Defaults to:
'current'
order :
String
(optional)
A shortcut for the order event option. Provided for backward compatibility.
Please use the priority event option instead.
Defaults to: 'current'
:
Object
Only when the destroyable option is specified.
A Destroyable object. An object which implements the destroy method which removes
all listeners added in this call. For example:
this.btnListeners = = myButton.on({
destroyable: true
mouseover: function() { console.log('mouseover'); },
mouseout: function() { console.log('mouseout'); },
click: function() { console.log('click'); }
});
And when those listeners need to be removed:
Ext.destroy(this.btnListeners);
or
this.btnListeners.destroy();
The addManagedListener method is used when some object (call it "A") is listening
to an event on another observable object ("B") and you want to remove that listener
from "B" when "A" is destroyed. This is not an issue when "B" is destroyed because
all of its listeners will be removed at that time.
Example:
Ext.define('Foo', {
extend: 'Ext.Component',
initComponent: function () {
this.addManagedListener(MyApp.SomeGlobalSharedMenu, 'show', this.doSomething);
this.callParent();
}
});
As you can see, when an instance of Foo is destroyed, it ensures that the 'show'
listener on the menu (MyApp.SomeGlobalSharedMenu) is also removed.
As of version 5.1 it is no longer necessary to use this method in most cases because
listeners are automatically managed if the scope object provided to
addListener is an Observable instance.
However, if the observable instance and scope are not the same object you
still need to use mon or addManagedListener if you want the listener to be
managed.
item :
Ext.util.Observable/Ext.dom.Element
The item to which to add a listener/listeners.
ename :
Object/String
The event name, or an object containing event name properties.
fn :
Function/String
(optional)
If the ename parameter was an event
name, this is the handler function or the name of a method on the specified
scope.
scope :
Object
(optional)
If the ename parameter was an event name, this is the scope (this reference)
in which the handler function is executed.
options :
Object
(optional)
If the ename parameter was an event name, this is the
addListener options.
:
Object
Only when the destroyable option is specified.
A Destroyable object. An object which implements the destroy method which removes all listeners added in this call. For example:
this.btnListeners = myButton.mon({
destroyable: true
mouseover: function() { console.log('mouseover'); },
mouseout: function() { console.log('mouseout'); },
click: function() { console.log('click'); }
});
And when those listeners need to be removed:
Ext.destroy(this.btnListeners);
or
this.btnListeners.destroy();
Call the original method that was previously overridden with Ext.Base#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"
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callOverridden(arguments)
:
Object
Returns the result of calling the overridden method
Deprecated since version 4.1.0
Use method-callParent instead.
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 and private methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
// privates: {
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',
// privates: {
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
method-callSuper. This is often done to patch a method to fix a bug.
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callParent(arguments)
:
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', {
extend: 'Ext.some.Class',
method: function () {
console.log('Bad');
// ... logic but with a bug ...
this.callParent();
}
});
To patch the bug in Ext.some.DerivedClass.method, the typical solution is to create an
override:
Ext.define('App.patches.DerivedClass', {
override: 'Ext.some.DerivedClass',
method: function () {
console.log('Fixed');
// ... logic but with bug fixed ...
this.callSuper();
}
});
The patch method cannot use method-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".
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callSuper(arguments)
:
Object
Returns the result of calling the superclass method
Removes all listeners for this object including the managed listeners
Removes all managed listeners for this object.
Creates an event handling function which re-fires the event from this object as the passed event name.
newName :
String
The name under which to re-fire the passed parameters.
beginEnd :
Array
(optional)
The caller can specify on which indices to slice.
:
Function
Destructor for classes that extend Observable.
Destroys member properties by name.
If a property name is the name of a config, the getter is not invoked, so
if the config has not been initialized, nothing will be done.
The property will be destroyed, and the corrected name (if the property is a config
and config names are prefixed) will set to null in this object's dictionary.
args :
String...
One or more names of the properties to destroy and remove from the object.
Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if
present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers.
See Ext.Component#getBubbleTarget. The default implementation in Ext.Component returns the
Component's immediate owner. But if a known target is required, this can be overridden to access the
required target more quickly.
Example:
Ext.define('Ext.overrides.form.field.Base', {
override: 'Ext.form.field.Base',
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent: function () {
this.callParent();
this.enableBubble('change');
}
});
var myForm = Ext.create('Ext.form.Panel', {
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});
eventNames :
String/String[]
The event name to bubble, or an Array of event names.
Fires the specified event with the passed parameters and executes a function (action).
By default, the action function will be executed after any "before" event handlers
(as specified using the order option of
addListener), but before any other
handlers are fired. This gives the "before" handlers an opportunity to
cancel the event by returning false, and prevent the action function from
being called.
The action can also be configured to run after normal handlers, but before any "after"
handlers (as specified using the order event option) by passing 'after'
as the order parameter. This configuration gives any event handlers except
for "after" handlers the opportunity to cancel the event and prevent the action
function from being called.
eventName :
String
The name of the event to fire.
args :
Array
Arguments to pass to handlers and to the action function.
scope :
Object
(optional)
The scope (this reference) in which the handler function is
executed. If omitted, defaults to the object which fired the event.
options :
Object
(optional)
Event options for the action function. Accepts any
of the options of addListener
order :
String
(optional)
The order to call the action function relative
too the event handlers ('before' or 'after'). Note that this option is
simply used to sort the action function relative to the event handlers by "priority".
An order of 'before' is equivalent to a priority of 99.5, while an order of
'after' is equivalent to a priority of -99.5. See the priority option
of addListener for more details.
Defaults to: 'before'
Deprecated since version 5.5
Use fireEventedAction instead.
Fires the specified event with the passed parameters (minus the event name, plus the options object passed
to addListener).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component#getBubbleTarget) by
calling enableBubble.
eventName :
String
The name of the event to fire.
args :
Object...
Variable number of parameters are passed to handlers.
:
Boolean
returns false if any of the handlers return false otherwise it returns true.
Fires the specified event with the passed parameter list.
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component#getBubbleTarget) by
calling enableBubble.
eventName :
String
The name of the event to fire.
args :
Object[]
An array of parameters which are passed to handlers.
:
Boolean
returns false if any of the handlers return false otherwise it returns true.
Fires the specified event with the passed parameters and executes a function (action).
Evented Actions will automatically dispatch a 'before' event passing. This event will
be given a special controller that allows for pausing/resuming of the event flow.
By pausing the controller the updater and events will not run until resumed. Pausing,
however, will not stop the processing of any other before events.
eventName :
String
The name of the event to fire.
args :
Array
Arguments to pass to handlers and to the action function.
scope :
Object
(optional)
The scope (this reference) in which the handler function is
executed. If omitted, defaults to the object which fired the event.
fnArgs :
Array/Boolean
(optional)
Optional arguments for the action fn. If not
given, the normal args will be used to call fn. If false is passed, the
args are used but if the first argument is this instance it will be removed
from the args passed to the action function.
:
Boolean
Gets the bubbling parent for an Observable
:
Ext.util.Observable
The bubble parent. null is returned if no bubble target exists
Returns a specified config property value. If the name parameter is not passed,
all current configuration options will be returned as key value pairs.
name :
String
(optional)
The name of the config property to get.
peek :
Boolean
(optional)
true to peek at the raw value without calling the getter.
Defaults to: false
ifInitialized :
Boolean
(optional)
true to only return the initialized property value,
not the raw config value, and not to trigger initialization. Returns undefined if the
property has not yet been initialized.
Defaults to: false
:
Object
The config property value.
Retrieves the id of this component. Will autogenerate an id if one has not already been set.
:
String
Returns the initial configuration passed to the constructor when
instantiating this class.
Given this example Ext.button.Button definition and instance:
Ext.define('MyApp.view.Button', {
extend: 'Ext.button.Button',
xtype: 'mybutton',
scale: 'large',
enableToggle: true
});
var btn = Ext.create({
xtype: 'mybutton',
renderTo: Ext.getBody(),
text: 'Test Button'
});
Calling btn.getInitialConfig() would return an object including the config
options passed to the create method:
xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'
Calling btn.getInitialConfig('text')returns 'Test Button'.
name :
String
(optional)
Name of the config option to return.
:
Object/Mixed
The full config object or a single config value
when name parameter specified.
Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer
indicates whether the event needs firing or not.
eventName :
String
The name of the event to check for
:
Boolean
true if the event is being listened for or bubbles, else false
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'
:
Ext.Base
Checks if all events, or a specific event, is suspended.
event :
String
(optional)
The name of the specific event to check
:
Boolean
true if events are suspended
Adds a "destroyable" object to an internal list of objects that will be destroyed
when this instance is destroyed (via destroy).
:
Object
Shorthand for addManagedListener.
The addManagedListener method is used when some object (call it "A") is listening
to an event on another observable object ("B") and you want to remove that listener
from "B" when "A" is destroyed. This is not an issue when "B" is destroyed because
all of its listeners will be removed at that time.
Example:
Ext.define('Foo', {
extend: 'Ext.Component',
initComponent: function () {
this.addManagedListener(MyApp.SomeGlobalSharedMenu, 'show', this.doSomething);
this.callParent();
}
});
As you can see, when an instance of Foo is destroyed, it ensures that the 'show'
listener on the menu (MyApp.SomeGlobalSharedMenu) is also removed.
As of version 5.1 it is no longer necessary to use this method in most cases because
listeners are automatically managed if the scope object provided to
addListener is an Observable instance.
However, if the observable instance and scope are not the same object you
still need to use mon or addManagedListener if you want the listener to be
managed.
item :
Ext.util.Observable/Ext.dom.Element
The item to which to add a listener/listeners.
ename :
Object/String
The event name, or an object containing event name properties.
fn :
Function/String
(optional)
If the ename parameter was an event
name, this is the handler function or the name of a method on the specified
scope.
scope :
Object
(optional)
If the ename parameter was an event name, this is the scope (this reference)
in which the handler function is executed.
options :
Object
(optional)
If the ename parameter was an event name, this is the
addListener options.
:
Object
Only when the destroyable option is specified.
A Destroyable object. An object which implements the destroy method which removes all listeners added in this call. For example:
this.btnListeners = myButton.mon({
destroyable: true
mouseover: function() { console.log('mouseover'); },
mouseout: function() { console.log('mouseout'); },
click: function() { console.log('click'); }
});
And when those listeners need to be removed:
Ext.destroy(this.btnListeners);
or
this.btnListeners.destroy();
Shorthand for removeManagedListener.
Removes listeners that were added by the mon method.
item :
Ext.util.Observable/Ext.dom.Element
The item from which to remove a listener/listeners.
ename :
Object/String
The event name, or an object containing event name properties.
fn :
Function
(optional)
If the ename parameter was an event name, this is the handler function.
scope :
Object
(optional)
If the ename parameter was an event name, this is the scope (this reference)
in which the handler function is executed.
The on method is shorthand for
addListener.
Appends an event handler to this object. For example:
myGridPanel.on("itemclick", this.onItemClick, this);
The method also allows for a single argument to be passed which is a config object
containing properties which specify multiple events. For example:
myGridPanel.on({
cellclick: this.onCellClick,
select: this.onSelect,
viewready: this.onViewReady,
scope: this // Important. Ensure "this" is correct during handler execution
});
One can also specify options for each event handler separately:
myGridPanel.on({
cellclick: {fn: this.onCellClick, scope: this, single: true},
viewready: {fn: panel.onViewReady, scope: panel}
});
Names of methods in a specified scope may also be used:
myGridPanel.on({
cellclick: {fn: 'onCellClick', scope: this, single: true},
viewready: {fn: 'onViewReady', scope: panel}
});
eventName :
String/Object
The name of the event to listen for.
May also be an object who's property names are event names.
fn :
Function/String
(optional)
The method the event invokes or the name of
the method within the specified scope. Will be called with arguments
given to Ext.util.Observable#fireEvent plus the options parameter described
below.
scope :
Object
(optional)
The scope (this reference) in which the handler function is
executed. If omitted, defaults to the object which fired the event.
options :
Object
(optional)
An object containing handler configuration.
Note: The options object will also be passed as the last argument to every
event handler.
This object may contain any of the following properties:
scope :
Object
The scope (this reference) in which the handler function is executed. If omitted,
defaults to the object which fired the event.
delay :
Number
The number of milliseconds to delay the invocation of the handler after the event
fires.
single :
Boolean
True to add a handler to handle just the next firing of the event, and then remove
itself.
buffer :
Number
Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed
by the specified number of milliseconds. If the event fires again within that time,
the original handler is not invoked, but the new handler is scheduled in its place.
onFrame :
Number
Causes the handler to be scheduled to run at the next
animation frame event. If the
event fires again before that time, the handler is not rescheduled - the handler
will only be called once when the next animation frame is fired, with the last set
of arguments passed.
target :
Ext.util.Observable
Only call the handler if the event was fired on the target Observable, not if the
event was bubbled up from a child Observable.
element :
String
This option is only valid for listeners bound to Ext.Component.
The name of a Component property which references an Ext.dom.Element
to add a listener to.
This option is useful during Component construction to add DOM event listeners to
elements of Ext.Component which will exist only after the
Component is rendered.
For example, to add a click listener to a Panel's body:
var panel = new Ext.panel.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
In order to remove listeners attached using the element, you'll need to reference
the element itself as seen below.
panel.body.un(...)
delegate :
String
(optional)
A simple selector to filter the event target or look for a descendant of the target.
The "delegate" option is only available on Ext.dom.Element instances (or
when attaching a listener to a Ext.dom.Element via a Component using the
element option).
See the delegate example below.
capture :
Boolean
(optional)
When set to true, the listener is fired in the capture phase of the event propagation
sequence, instead of the default bubble phase.
The capture option is only available on Ext.dom.Element instances (or
when attaching a listener to a Ext.dom.Element via a Component using the
element option).
stopPropagation :
Boolean
(optional)
preventDefault :
Boolean
(optional)
stopEvent :
Boolean
(optional)
This option is only valid for listeners bound to Ext.dom.Element.
true to call stopEvent on the event object
before firing the handler.
args :
Array
(optional)
Optional set of arguments to pass to the handler function before the actual
fired event arguments. For example, if args is set to ['foo', 42],
the event handler function will be called with an arguments list like this:
handler('foo', 42, <actual event arguments>...);
destroyable :
Boolean
(optional)
When specified as true, the function returns a destroyable object. An object
which implements the destroy method which removes all listeners added in this call.
This syntax can be a helpful shortcut to using un; particularly when
removing multiple listeners. NOTE - not compatible when using the element
option. See un for the proper syntax for removing listeners added using the
element config.
Defaults to:
false
priority :
Number
(optional)
An optional numeric priority that determines the order in which event handlers
are run. Event handlers with no priority will be run as if they had a priority
of 0. Handlers with a higher priority will be prioritized to run sooner than
those with a lower priority. Negative numbers can be used to set a priority
lower than the default. Internally, the framework uses a range of 1000 or
greater, and -1000 or lesser for handlers that are intended to run before or
after all others, so it is recommended to stay within the range of -999 to 999
when setting the priority of event handlers in application-level code.
A priority must be an integer to be valid. Fractional values are reserved for
internal framework use.
order :
String
(optional)
A legacy option that is provided for backward compatibility.
It is recommended to use the priority option instead. Available options are:
'before': equal to a priority of 100'current': equal to a priority of 0 or default priority'after': equal to a priority of -100
Defaults to:
'current'
order :
String
(optional)
A shortcut for the order event option. Provided for backward compatibility.
Please use the priority event option instead.
Defaults to: 'current'
:
Object
Only when the destroyable option is specified.
A Destroyable object. An object which implements the destroy method which removes
all listeners added in this call. For example:
this.btnListeners = = myButton.on({
destroyable: true
mouseover: function() { console.log('mouseover'); },
mouseout: function() { console.log('mouseout'); },
click: function() { console.log('click'); }
});
And when those listeners need to be removed:
Ext.destroy(this.btnListeners);
or
this.btnListeners.destroy();
Appends an after-event handler.
Same as addListener with order set
to 'after'.
eventName :
String/String[]/Object
The name of the event to listen for.
fn :
Function/String
The method the event invokes.
scope :
Object
(optional)
options :
Object
(optional)
An object containing handler configuration.
Appends a before-event handler. Returning false from the handler will stop the event.
Same as addListener with order set
to 'before'.
eventName :
String/String[]/Object
The name of the event to listen for.
fn :
Function/String
The method the event invokes.
scope :
Object
(optional)
options :
Object
(optional)
An object containing handler configuration.
Relays selected events from the specified Observable as if the events were fired by this.
For example if you are extending Grid, you might decide to forward some events from store.
So you can do this inside your initComponent:
this.relayEvents(this.getStore(), ['load']);
The grid instance will then have an observable 'load' event which will be passed
the parameters of the store's load event and any function fired with the grid's
load event would have access to the grid using the this keyword (unless the event
is handled by a controller's control/listen event listener in which case 'this'
will be the controller rather than the grid).
origin :
Object
The Observable whose events this object is to relay.
events :
String[]/Object
Array of event names to relay or an Object with key/value
pairs translating to ActualEventName/NewEventName respectively. For example:
this.relayEvents(this, {add:'push', remove:'pop'});
Would now redispatch the add event of this as a push event and the remove event as a pop event.
prefix :
String
(optional)
A common prefix to prepend to the event names. For example:
this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
Now the grid will forward 'load' and 'clear' events of store as 'storeload' and 'storeclear'.
:
Object
A Destroyable object. An object which implements the destroy method which, when destroyed, removes all relayers. For example:
this.storeRelayers = this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
Can be undone by calling
Ext.destroy(this.storeRelayers);
or
this.store.relayers.destroy();
Removes an event handler.
eventName :
String
The type of event the handler was associated with.
fn :
Function
The handler to remove. This must be a reference to the function
passed into the
addListener call.
scope :
Object
(optional)
The scope originally specified for the handler. It
must be the same as the scope argument specified in the original call to
Ext.util.Observable#addListener or the listener will not be removed.
:
Removes listeners that were added by the mon method.
item :
Ext.util.Observable/Ext.dom.Element
The item from which to remove a listener/listeners.
ename :
Object/String
The event name, or an object containing event name properties.
fn :
Function
(optional)
If the ename parameter was an event name, this is the handler function.
scope :
Object
(optional)
If the ename parameter was an event name, this is the scope (this reference)
in which the handler function is executed.
Remove a single managed listener item
isClear :
Boolean
True if this is being called during a clear
managedListener :
Object
The managed listener item
scope :
Object
See removeManagedListener for other args
Gets the default scope for firing late bound events (string names with
no scope attached) at runtime.
defaultScope :
Object
(optional)
The default scope to return if none is found.
Defaults to: this
:
Object
Resumes firing of the named event(s).
After calling this method to resume events, the events will fire when requested to fire.
Note that if the suspendEvent method is called multiple times for a certain event,
this converse method will have to be called the same number of times for it to resume firing.
eventName :
String...
Multiple event names to resume.
Resumes firing events (see suspendEvents).
If events were suspended using the queueSuspended parameter, then all events fired
during event suspension will be sent to any listeners now.
discardQueue :
Boolean
(optional)
true to prevent any previously queued events from firing
while we were suspended. See suspendEvents.
Sets a single/multiple configuration options.
name :
String/Object
The name of the property to set, or a set of key value pairs to set.
value :
Object
(optional)
The value to set for the name parameter.
:
Ext.Base
Get the reference to the class from which this object was instantiated. Note that unlike Ext.Base#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
:
Ext.Class
Suspends firing of the named event(s).
After calling this method to suspend events, the events will no longer fire when requested to fire.
Note that if this is called multiple times for a certain event, the converse method
resumeEvent will have to be called the same number of times for it to resume firing.
eventName :
String...
Multiple event names to suspend.
Suspends the firing of all events. (see resumeEvents)
queueSuspended :
Boolean
true to queue up suspended events to be fired
after the resumeEvents call instead of discarding all suspended events.
Shorthand for removeListener.
Removes an event handler.
eventName :
String
The type of event the handler was associated with.
fn :
Function
The handler to remove. This must be a reference to the function
passed into the
addListener call.
scope :
Object
(optional)
The scope originally specified for the handler. It
must be the same as the scope argument specified in the original call to
Ext.util.Observable#addListener or the listener will not be removed.
:
Removes a before-event handler.
Same as removeListener with order set to 'after'.
eventName :
String/String[]/Object
The name of the event the handler was associated with.
scope :
Object
(optional)
The scope originally specified for fn.
options :
Object
(optional)
Removes a before-event handler.
Same as removeListener with order set to 'before'.
eventName :
String/String[]/Object
The name of the event the handler was associated with.
scope :
Object
(optional)
The scope originally specified for fn.
options :
Object
(optional)
Destroys a given set of linked objects. This is only needed if
the linked object is being destroyed before this instance.
names :
String[]
The names of the linked objects to destroy.
:
Ext.Base
Static Methods
Adds new config properties to this class. This is called for classes when they
are declared, then for any mixins that class may define and finally for any
overrides defined that target the class.
mixinClass :
Ext.Class
(optional)
The mixin class if the configs are from a mixin.
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();
members :
Object
The members to add to this class.
isStatic :
Boolean
(optional)
Pass true if the members are static.
Defaults to: false
privacy :
Boolean
(optional)
Pass true if the members are private. This
only has meaning in debug mode and only for methods.
Defaults to: false
:
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() { ... };
});
:
Ext.Base
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 '$$$$$$$'
fromClass :
Ext.Base
The class to borrow members from
members :
Array/String
The names of the members to borrow
:
Ext.Base
Starts capture on the specified Observable. All events will be passed to the supplied function with the event
name + standard signature of the event before the event is fired. If the supplied function returns false,
the event will not fire.
o :
Ext.util.Observable
The Observable to capture events from.
fn :
Function
The function to call when an event is fired.
scope :
Object
(optional)
The scope (this reference) in which the function is executed. Defaults to
the Observable firing the event.
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.
:
Object
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()
alias :
String/Object
The new method name, or an object to set multiple aliases. See
flexSetter
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'
:
String
Used internally by the mixins pre-processor
:
Sets observability on the passed class constructor.
This makes any event fired on any instance of the passed class also fire a single event through
the class allowing for central handling of events on many instances at once.
Usage:
Ext.util.Observable.observe(Ext.data.Connection);
Ext.data.Connection.on('beforerequest', function(con, options) {
console.log('Ajax request made to ' + options.url);
});
cls :
Function
The class constructor to make observable.
listeners :
Object
An object containing a series of listeners to
add. See addListener.
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"
Direct use of this method should be rare. 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).
members :
Object
The properties to add to this class. This should be
specified as an object literal containing one or more properties.
:
Ext.Base
Prepares a given class for observable instances. This method is called when a
class derives from this class or uses this class as a mixin.
T :
Function
The class constructor to prepare.
mixin :
Ext.util.Observable
The mixin if being used as a mixin.
data :
Object
The raw class creation data if this is an extend.
Removes all added captures from the Observable.
o :
Ext.util.Observable
The Observable to release
Ext JS | Terms of Use