My first idea how to the name this article was “Ext.Direct for Dummies” just because I feel as a one as long as Ext.Direct is concerned. I’ve first heard about it during Ext Conference in April and I think that it is one of the brightest ideas of Ext 3.x release. Nevertheless, I had no time do dig into into it and to understand the concepts fully.
Now I’ve decided to take a journey of discovering what is under hood, how to setup client and server side and how to use Ext.Direct effectively in applications. If you want, I invite you to travel with me.
Who is this article for
What is Ext.Direct anyway
Rich Internet Applications (RIA) consist of two parts: client side and server side. Client cannot call server functions directly but sends requests, server processes them calling the appropriate functions and returns results back to client.
Let’s say we have a server side class
that has methods
. From the client viewpoint, we need to ask server: Please,
with it and then
Now, imagine that we could directly call
and these would call server
side methods of server
. Nice, isn’t it? You need to remember only one set of class names and their methods, code is neat and less bug prone.
And that is what Ext.Direct does. You export list of server side classes and their methods that should be made available for client to call and Ext.Direct takes care of the rest so that you can really use
in your code.
What we need
- a working http server we have an access to. It can be installed on the local computer but it must be present. file:///something links will not work
- a server side (scripting) language enabled in the above server. If you will use PHP, you need 5+ version to take advantage of ReflectionClass
- Ext JS 3.0.0 library or latest Ext version built from SVN, if you have purchased Ext Premium Membership
- Ext.Direct Pack
- Firefox with Firebug installed
- If you use PHP, FirePHP is strongly recommended
- create directory
direct under your http server document root. Name does not matter in fact but I will use
direct as the root for testing in this article.
- extract ExtJS into
ext subdirectory under
- extract content of php subdirectory from Ext.Direct Pack under
- extract content of FirePHPCore-x.x.x into
firephp subdirectory under
At this point, your
directory listing should read the following:
The first test
We still need to do some work before we can see it running. First, create
file with the following content:
We also need
so we have something to run:
Mastering Ext.Direct by Saki
Ext.Direct Pack comes with example PHP classes (
Echo, Exception, File
) and with
file. You can leave classes untouched for the moment but edit
to read the following:
setRouterUrl('router.php'); // default
// disable caching for development, enable for production
'autoInclude' => true,
'basePath' => 'classes'
// these are example classes from Ext.Direct PHP stack
// real class name is Class_Echo, therefore prefix
'Echo' => array('prefix' => 'Class_'),
// real class name is Class_Exception, therefore prefix
'Exception' => array('prefix' => 'Class_'),
$_SESSION['ext-direct-state'] = $api->getState();
So far, so good… Now you can navigate to
and if everything went right you will see the blank page and no errors in Firebug.
Open Firebug console and type the following:
You can see that request is sent to server:
and that response comes back:
You can try other classes and methods:
Example.Echo.send("Test to be echoed");
and you can also put
statement in various places of php code if you want to know what’s going on here and there.
We have set up very minimum of Ext.Direct server and client side. The main purpose of this part is to get acquainted with basic components of this technology.