Preface

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

It is for developers who are familiar (at least) with basic javascript and Ext object oriented programming, who are able to setup a web page and have it running from a http server and who can code in a server-side programming language. (I will use PHP in this article so PHP developers will have a slight advantage.)

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 Car that has methods start, go and stop. From the client viewpoint, we need to ask server: Please, start the Car, then go with it and then stop it.

Now, imagine that we could directly call

Car.start();
Car.go();
Car.stop();

and these would call server side methods of server side class Car. 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 Car.start() in your code.

What we need

1. 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
2. a server side (scripting) language enabled in the above server. If you will use PHP, you need 5+ version to take advantage of ReflectionClass
3. Ext JS 3.0.0 library or latest Ext version built from SVN, if you have purchased Ext Premium Membership
4. Ext.Direct Pack
5. Firefox with Firebug installed
6. If you use PHP, FirePHP is strongly recommended

Initial setup

1. 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.
2. extract ExtJS into ext subdirectory under direct
3. extract content of php subdirectory from Ext.Direct Pack under direct
4. extract content of FirePHPCore-x.x.x into firephp subdirectory under direct

At this point, your direct directory listing should read the following:

+ cache/
+ classes/
+ data/
+ ext/
+ ExtDirect/
+ firephp/
  api.php
  router.php

The first test

We still need to do some work before we can see it running. First, create config.php file with the following content:

We also need index.php so we have something to run:

Mastering Ext.Direct by Saki

    Ext.Direct.addProvider(Example.API);

Ext.Direct Pack comes with example PHP classes (Echo, Exception, File and Time) and with api.php file. You can leave classes untouched for the moment but edit api.php to read the following:

setRouterUrl('router.php'); // default

// disable caching for development, enable for production
//$api->setCacheProvider($cache);

$api->setNamespace('Example');
$api->setDescriptor('Example.API');
$api->setDefaults(array(
    'autoInclude' => true,
    'basePath' => 'classes'
));

$api->add(
    // these are example classes from Ext.Direct PHP stack
    array(
        // real class name is Class_Echo, therefore prefix
        'Echo' => array('prefix' => 'Class_'),

        // real class name is Class_Exception, therefore prefix
        'Exception' => array('prefix' => 'Class_'),
        'Time',
        'File'
    )
);
$api->output();

$_SESSION['ext-direct-state'] = $api->getState();

// eof
?>

So far, so good… Now you can navigate to http://yourserver/direct/index.php and if everything went right you will see the blank page and no errors in Firebug.

Open Firebug console and type the following:

Example.Time.get();

You can see that request is sent to server:

{"action":"Time","method":"get","data":null,"type":"rpc","tid":2}

and that response comes back:

{"type":"rpc","tid":2,"action":"Time","method":"get","result":"09-05-2009 19:46:38"}

You can try other classes and methods:

Example.Echo.send("Test to be echoed");
Example.File.list(".");
Example.Time.get();

and you can also put fb($someVariable) statement in various places of php code if you want to know what’s going on here and there.

Conclusion

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.

Mastering Ext.Direct, Part 2 >>>

• Author
• Recent Posts

Follow me:

saki

I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.

Follow me:

Latest posts by saki (see all)

• Ext, Angular, React, and Vue - 27. June 2019
• The Site Resurgence - 11. February 2018
• Configuring ViewModel Hierarchy - 19. June 2015