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();
Performs a batch of Ext.data.operation.Operation, in the order specified by batchOrder. Used
internally by Ext.data.Store's sync method. Example usage:
myProxy.batch({
create : [myModel1, myModel2],
update : [myModel3],
destroy: [myModel4, myModel5]
});
Where the myModel* above are Ext.data.Model instances - in this case 1 and 2 are new instances and
have not been saved before, 3 has been saved previously but needs to be updated, and 4 and 5 have already been
saved but should now be destroyed.
Note that the previous version of this method took 2 arguments (operations and listeners). While this is still
supported for now, the current signature is now a single options argument that can contain both operations and
listeners, in addition to other options. The multi-argument signature will likely be deprecated in a future release.
options :
Object
Object containing one or more properties supported by the batch method:
operations :
Object
Object containing the Model instances to act upon, keyed by action name
listeners :
Object
(optional)
Event listeners object passed straight through to the Batch -
see Ext.data.Batch for details
callback :
Function
(optional)
The function to be called upon completion of processing the batch.
The callback is called regardless of success or failure and is passed the following parameters:
batch :
Ext.data.Batch
The Ext.data.Batch that was processed,
containing all operations in their current state after processing
options :
Object
The options argument that was originally passed into batch
success :
Function
(optional)
The function to be called upon successful completion of the batch. The
success function is called only if no exceptions were reported in any operations. If one or more exceptions
occurred then the failure function will be called instead. The success function is called
with the following parameters:
batch :
Ext.data.Batch
The Ext.data.Batch that was processed,
containing all operations in their current state after processing
options :
Object
The options argument that was originally passed into batch
failure :
Function
(optional)
The function to be called upon unsuccessful completion of the batch. The
failure function is called when one or more operations returns an exception during processing (even if some
operations were also successful). In this case you can check the batch's exceptions array to see exactly which operations had exceptions. The failure function is called with the
following parameters:
batch :
Ext.data.Batch
The Ext.data.Batch that was processed,
containing all operations in their current state after processing
options :
Object
The options argument that was originally passed into batch
scope :
Object
(optional)
The scope in which to execute any callbacks (i.e. the this object inside
the callback, success and/or failure functions). Defaults to the proxy.
listeners :
Object
(optional)
If options is the operations, this
parameter is the listeners. Instead of passing these two arguments, the proper form
is to pass them as:
batch({
operations: ...
listeners: ...
});
:
Ext.data.Batch
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 the Proxy
config :
Object
(optional)
Performs the given create operation.
operation :
Ext.data.operation.Operation
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
This method is called to cleanup an object and its resources. After calling
this method, the object should not be used any further in any way, including
access to its methods and properties.
To prevent potential memory leaks, all object references will be nulled
at the end of destruction sequence, unless clearPropertiesOnDestroy
is set to false.
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.
Performs the given destroy operation.
operation :
Ext.data.operation.Operation
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.
The internal callback that the proxy uses to call any specified user callbacks after completion of a batch
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.
Performs the given read operation.
operation :
Ext.data.operation.Operation
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
Performs the given update operation.
operation :
Ext.data.operation.Operation
Ext JS | Terms of Use
