The Dispatcher is responsible for sending requests through to a specific controller action. It is usually invoked either by a UI event handler calling Ext.dispatch, or by the Router recognizing a change in the page url.
Ext.Dispatcher is the default instance of Ext.util.Dispatcher that is automatically created for every application. Usually it is the only instance that you will need.
Let's say we have an application that manages instances of a Contact model using a contacts controller:
Ext.regModel('Contact', {
fields: ['id', 'name', 'email']
});
//the controller has a single action - list - which just loads the Contacts and logs them to the console
Ext.regController('contacts', {
list: function() {
new Ext.data.Store({
model: 'Contact',
autoLoad: {
callback: function(contacts) {
console.log(contacts);
}
}
});
}
});
We can easily dispatch to the contacts controller's list action from anywhere in our app:
Ext.dispatch({
controller: 'contacts',
action : 'list',
historyUrl: 'contacts/list',
anotherOption: 'some value'
});
The Dispatcher finds the contacts controller and calls its list action. We also passed in a couple of additional options to dispatch - historyUrl and anotherOption. 'historyUrl' is a special parameter which automatically changes the browser's url when passed. For example, if your application is being served from http://yourapp.com, dispatching with the options we passed above would update the url to http://yourapp.com/#contacts/list, as well as calling the controller action as before.
We also passed a second configuration into dispatch - anotherOption. We can access this inside our controller action like this:
Ext.regController('contacts', {
list: function(options) {
console.log(options.anotherOption); // 'some value'
}
});
We can pass anything in to Ext.dispatch and have it come through to our controller action. Internally, all of the options that we pass to dispatch are rolled into an Ext.Interaction. Interaction is a very simple class that represents a single request into the application - typically the controller and action names plus any additional information like the Model instance that a particular action is concerned with.
A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once.
DOM events from ExtJs Components
While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
is usually only done when extra value can be added. For example the DataView's
click
event passing the node clicked on. To access DOM
events directly from a child element of a Component, we need to specify the element
option to
identify the Component property to add a DOM listener to:
new Ext.Panel({
width: 400,
height: 200,
dockedItems: [{
xtype: 'toolbar'
}],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log('click el'); }
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){ console.log('dblclick body'); }
}
}
});
true
or the first event name string if multiple event names are being passed as separate parameters.this.addEvents('storeloaded', 'storecleared');
this
reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event.this
reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event.This option is useful during Component construction to add DOM event listeners to elements of Components which will exist only after the Component is rendered. For example, to add a click listener to a Panel's body:
new Ext.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
When added in this way, the options available are the options applicable to Ext.core.Element.addListener
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener.
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
Attaching multiple handlers in 1 call
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,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
scope: this // Important. Ensure "this" is correct during handler execution
});
.
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
ename
parameter was an event name, this
is the handler function.ename
parameter was an event name, this
is the scope (this
reference) in which the handler function is executed.ename
parameter was an event name, this
is the addListener options.this
reference) in which the function is executed. Defaults to the Observable firing the event.this
reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event.myComponent.on({
homeTap : Ext.Dispatcher.createRedirect('home'),
inboxTap: Ext.Dispatcher.createRedirect('inbox'),
});
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.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.Function.createSequence(Ext.form.Field.prototype.initComponent, function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});
Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.
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);
});
this
.ename
parameter was an event name, this
is the handler function.ename
parameter was an event name, this
is the scope (this
reference) in which the handler function is executed.queueSuspended
parameter, then all
events fired during event suspension will be sent to any listeners now.