The RemotingProvider exposes access to server side methods on the client (a remote procedure call (RPC) type of connection where the client can initiate a procedure on the server).
This allows for code to be organized in a fashion that is maintainable, while providing a clear path between client and server, something that is not always apparent when using URLs.
To accomplish this the server-side needs to describe what classes and methods are available on the client-side. This configuration will typically be outputted by the server-side Ext.Direct stack when the API description is built.
"actions":{ // each property within the 'actions' object represents a server side Class
"TestAction":[ // array of methods within each server side Class to be
{ // stubbed out on client
"name":"doEcho",
"len":1
},{
"name":"multiply",// name of method
"len":2 // The number of parameters that will be used to create an
// array of data to send to the server side function.
// Ensure the server sends back a Number, not a String.
},{
"name":"doForm",
"formHandler":true, // direct the client to use specialized form handling method
"len":1
}]
}Note that a Store is not required, a server method can be called at any time. In the following example a client side handler is used to call the server side method "multiply" in the server-side "TestAction" Class:
TestAction.multiply(
2, 4, // pass two arguments to server, so specify len=2
// callback function after the server is called
// result: the result returned by the server
// e: Ext.Direct.RemotingEvent object
function(result, e){
var t = e.getTransaction();
var action = t.action; // server side Class called
var method = t.method; // server side method called
if(e.status){
var answer = Ext.encode(result); // 8
}else{
var msg = e.message; // failure message
}
}
);true or false to enable or disable combining of method calls. If a number is specified this is the amount of time in milliseconds to wait before sending a batched request (defaults to 10).
Calls which are received within the specified timeframe will be concatenated together and sent in a single request, optimizing the application by reducing the amount of round trips that have to be made to the server.
Ext.Direct.addProvider(
{
type: 'polling',
url: 'php/poll.php',
id: 'poll-provider'
}
);
var p = Ext.Direct.getProvider('poll-provider');
p.disconnect();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 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.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.