Mastering Ext.Direct, Part 1

5. September 2009 – 20:07

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:

<?
// vim: sw=4:ts=4:fdc=4:nospell
 
// authentication would come here in the real world
 
// switch it to false if you do not want to use FirePHP
// $useFirePHP would be false also for a production system
$useFirePHP = true;
 
// require FirePHP files
if($useFirePHP) {
	require_once("firephp/lib/FirePHPCore/FirePHP.class.php");
	require_once("firephp/lib/FirePHPCore/fb.php");
}
 
// define empty fb() function so code does not break 
// on any forgotten fb() calls later
else {
	function fb() {};
}
 
// eof
?>

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

<?require_once("config.php");?>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
  <title id="page-title">Mastering Ext.Direct by Saki</title>
  <script type="text/javascript" src="api.php"></script>
  <script type="text/javascript">
  	Ext.Direct.addProvider(Example.API);
  </script>
</head>
<body>
</body>
</html>

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:

<?php
require_once("config.php");
 
session_start();
 
// Include ExtDirect PHP Helpers
require_once('ExtDirect/API.php');
require_once('ExtDirect/CacheProvider.php');
 
// disable caching for development, enable for production
//$cache = new ExtDirect_CacheProvider('cache/api_cache.txt');
$api = new ExtDirect_API();
 
$api->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 >>>


StumbleUpon Toolbar
  1. 27 Responses to “Mastering Ext.Direct, Part 1”

  2. Thank you very much for this introduction to Ext.Direct. As a debug tool, maybe Formaldehyde is best suited. Taken from the google project page: \

    By Miguel on Sep 7, 2009

  3. Saki -

    Thanks for the great walk through introducing people to Ext.Direct and how to get it setup.

    I look forward to seeing the additional parts of the series!

    By Aaron Conran on Sep 7, 2009

  4. Thanks for article. It’s great… I have ideas about Ext.Direct now.

    By Salih Gedik on Sep 13, 2009

  5. Hmm,
    Seems to be a cool idea… But aside from removing some of the coding load off the client-side, I don\’t fully see how this will make my application any better or easier to code…

    I like the idea (as the name implies) that I can make direct server-side function calls from the client. But how does this speed the application up?

    Essentially, I\’m looking for the value of this EXTjs 3.x feature. If it does indeed make coding easier or my application faster (for the client-side), then I will certainly look to update my apps…

    By LoreZyra on Sep 20, 2009

  6. I’m not sure if Ext.Direct speeds up a running application, however, it speeds up development of applications tremendously. Main points:

    - same API client and server side
    - less typing – overhead code is now in Ext
    - less typing also means less (typo) bugs
    - less typing also means shorter, simpler application

    By Saki on Sep 20, 2009

  7. Hi, I found your article while I look for something I can explain Ext.Direct easily to my members of company.
    I want to translate this article and I want to put translated article with your credit on my blog and using it for lecture. Can I do it?

    By prographica on Oct 16, 2009

  8. Thank you for this sir!

    By Cameron on Oct 28, 2009

  9. Hey Saki,

    Thanks for very interesting and useful post.

    I\’ve got a question in regards to Ext.direct.

    I\’m trying to wire Ext.form with Ext.direct.
    Everything seems fine, except Ext does not like results returned by Ext.direct.

    Form looks as follows:
    var fp = new Ext.form.FormPanel({
    api: {
    submit: NRemote.UserService.addPic
    },
    fileUpload: true,
    width: 500,
    frame: true,
    ….
    buttons: [{
    text: \’Save\’,
    handler: function(){
    if(fp.getForm().isValid()){
    fp.getForm().submit({
    waitMsg: \’Uploading…\’,
    success: function(fp, o){
    msg(\’Success\’, \’Processed file \

    By Mike Bevz on Mar 23, 2010

  10. “‘+o.result.filename+’” on the server’);
    },
    failure: function(fp, o){
    msg(’Error’, ‘Error:’+o.result.msg);
    }
    });
    }
    }
    }

    —-

    For backend I’m using standard PHP stack from Ext http://www.extjs.com/products/extjs/download.php?dl=extdirectpack


    When I’m trying to upload a file, I’ve got a failure response all the time. I crawled internet a bit, and some people write that Ext.form expects JSON response not in Ext.direct format: “result”:{”success”:true,”msg”:”Some expection”}}
    When I return success=true – success handler work just fine, however, I don’t like the idea of modification of the standard stack.

    Do you know what I’m doing wrong? Should I set results handlers differently?

    Thanks for reply,

    By Mike Bevz on Mar 23, 2010

  11. Hi,

    i have post my problem on this link

    http://www.sencha.com/forum/showthread.php?135180-Ext.Direct-Grid-for-ASP.net-response-not-parse&p=607694#post607694

    the issue is with the ext direct grid with ASP.net, if anyone have any idea please help

    thanks,

    By Asif Raza on May 30, 2011

  12. This guy stole your post: http://jay.f2fsolutions.net/?mid=textyle&page=6&category=132&document_srl=1978

    By Samaritan on Jul 2, 2011

  13. Really its a great article about ExtDirect. its giving good idea about server side implementation of ExtDirect specification on PHP.
    I have also found a link where we can get a good idea about ExtDirect implementation on Java side.

    http://jksnu.blogspot.in/2013/08/extjs-extdirect-magic.html
    http://jksnu.blogspot.in/2013/08/extdirect-directgngine-example.html

    By Jitendra on Aug 12, 2013

  14. For the reason that the admin of this web page is working, no hesitation very soon it will be famous, due to its feature contents.

    By Horacio on Jan 13, 2014

  15. wonderful submit, very informative. I wonder why the other
    experts of this sector do not understand this. You should continue your writing.
    I’m confident, you’ve a huge readers’ base already!

    By Lourdes on Jan 27, 2014

  16. Greetings from Florida! I’m bored at work so I decided to check out
    your site on my iphone during lunch break.
    I really like the info you provide here and can’t wait to take
    a look when I get home. I’m amazed at how fast your blog loaded on my
    cell phone .. I’m not even using WIFI, just 3G ..
    Anyhow, superb blog!

    By Homepage: http://futurebaldnesscures.com/dont-let-blading-get-the-best-of-you-try-these-tips-now/... on Feb 7, 2014

  17. There is certainly a great deal to know about this issue.
    I really like all the points you’ve made.

    By how to improve memory on Feb 7, 2014

  18. I would like to thank you for the efforts you have put in writing this website.
    I am hoping to see the same high-grade blog posts by you in the future as well.
    In truth, your creative writing abilities has inspired me to get my own, personal website now ;)

    By health professions tracking service on Feb 10, 2014

  19. سجل حواليك بالمرة وإنت
    بتطفى السيجارة

    By تسوق هنا on Feb 22, 2014

  20. wonderful issues altogether, you just won a emblem new reader.
    What might you recommend in regards to your put up that
    you just made a few days ago? Any certain?

    By full movies on youtube comedy on Mar 7, 2014

  21. Attractive section of content. I just stumbled upon your blog and in accession capital to assert
    that I get actually enjoyed account your blog posts.
    Anyway I’ll be subscribing to your augment
    and even I achievement you access consistently quickly.

    By www.dailymotion.com on Mar 8, 2014

  22. Success in permanent weigh loss is the result of developingg a new set
    of habits where you eeat everything you like in the right amounts and frequencies, and it becomes habitual, automatic and ‘natural’.
    Even though prednisone is guven to calm an inflammatory condition, this medication can impair the immune system, masking
    the symptoms of an infection and makikng it easier to contract
    a new one. Sleeping pills, seizure medications, and other antidepressants can interact with paxil.

    Unfortunately, not everyone is blessed with a sliim figure.

    By weight loss pills List on Mar 12, 2014

  23. Greetings! Very helpful advice within this article!
    It is the little changes that will make the greatest changes.
    Thanks a lot for sharing!

    By get six pack abs on Mar 17, 2014

  24. Hello! I know this is kinda off topic nevertheless I’d figured I’d
    ask. Would you be interested in trading links or maybe guest authoring a blog post or
    vice-versa? My site discusses a lot of the same subjects as yours and I think we could
    greatly benefit from each other. If you might be interested
    feel free to shoot me an e-mail. I look forward to hearing from you!
    Superb blog by the way!

    By Brett rossi videos on Apr 8, 2014

  25. Hi there everyone, it’s my first pay a quick visit at this
    website, and paragraph is really fruitful designed for me, keep up posting these types of posts.

    By https://WilliamstvLE8zWh.jux.com/1846896 on Apr 9, 2014

  26. It’s hardly quelle surprise that, as mentioned previously, if you can’t make it
    to the finish. It is a pity that a large bicycle itrm to protect face can’t be got among Nike cycling apparel
    item, they are actually quite the same. In bicycle
    1992, Sean Kelly was approoaching his 36th birthday.

    Under the blazing Portuguese sunshine, we buy ice-creams in the
    Praza das Praterias. Traders too, reap the benefits from the calories in
    the 30 minutes post exercise, a 3-1 ration of carbs-protein is recommended.

    By sklepy rowerowe on Apr 10, 2014

  27. Magnificent beat ! I would like to apprentice while you amend your website, how could i subscribe ffor a blog web
    site? The account aided me a acceptable deal. I had been tiny
    bit acquainted off this your broadcast offered bright clear idea

    By Eugene on Apr 11, 2014

  28. Yes! Finally something abߋut film horror indonesia.

    By filmbokep on Apr 19, 2014

Post a Comment