Overview
Ext.direct.Direct aims to streamline communication between the client and server by providing a single interface that reduces the amount of common code typically required to validate data and handle returned data packets (reading data, error conditions, etc).
The Ext.direct namespace includes several classes for a closer integration with the server-side. The Ext.data namespace also includes classes for working with Ext.data.Stores which are backed by data from an Ext.direct.Direct method.
Specification
For additional information consult the Ext.direct.Direct Specification.
Providers
Ext.direct.Direct uses a provider architecture, where one or more providers are used to transport data to and from the server. There are several providers that exist in the core at the moment:
A provider does not need to be invoked directly, providers are added via Ext.direct.Direct.add.
Router
Ext.direct.Direct utilizes a "router" on the server to direct requests from the client to the appropriate server-side method. Because the Ext.direct.Direct API is completely platform-agnostic, you could completely swap out a Java based server solution and replace it with one that uses C# without changing the client side JavaScript at all.
Server side events
Custom events from the server may be handled by the client by adding listeners, for example:
{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
// add a handler for a 'message' event sent by the server
Ext.direct.Direct.on('message', function(e){
out.append(Ext.util.Format.format('<p><i>{0}</i></p>', e.data));
out.el.scrollTo('t', 100000, true);
});
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.var pollProv = new Ext.direct.PollingProvider({
url: 'php/poll2.php'
});
Ext.direct.Direct.addProvider(
{
"type":"remoting", // create a Ext.direct.RemotingProvider
"url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
"actions":{ // each property within the actions object represents a Class
"TestAction":[ // array of methods within each server side Class
{
"name":"doEcho", // name of method
"len":1
},{
"name":"multiply",
"len":1
},{
"name":"doForm",
"formHandler":true, // handle form on server with Ext.Direct.Transaction
"len":1
}]
},
"namespace":"myApplication",// namespace to create the Remoting Provider in
},{
type: 'polling', // create a Ext.direct.PollingProvider
url: 'php/poll.php'
},
pollProv // reference to previously created instance
);
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.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.