Ext.Direct VS Ext.Ajax

Question

What are the main advantages of Ext.direct over regular Ext.ajax calls? When should I consider using one over the other?

Couple votes up, but no real answer :) What's gonna be your server side? In our project we have Microsoft RIA Services and MSSQL database, so it was either to go with Ajax interface... But I don't have good comparison pros/cons etc... — sha
Looks like you're not gonna get a lot of answers here - might want to post this question on the sencha forums... — sha

phatskat phatskat · Accepted Answer · 2012-04-19T20:37:31

Really, it depends on your back-end, what you want to do, and what fits your situation. The question you presented its fairly vague, so my answer can only do so much for you I'm afraid. The BEST thing you can do is to look at the API pages for Ext.Direct and Ext.Ajax. Ext.Direct was (last time I looked) very well documented, as is .Ajax however there isn't much to .Ajax.

Ext.Direct - I started implementing this at my last job, and all-in-all it was a PITA to get up and running, however the benefits after were pretty neat. Ext.Direct allows you to call the server to execute methods that are defined as an API you pass to Ext in the form of a JSON object. These methods are then exposed to your application:

 // Server-side
 class MyDirectRouter
 {
     public function GetNames(){
        // Get some names from the database
        return $names;
     }
 }

 // Client-side - also, not sure on exact configs here so 
 // you should do your homework
 var store = Ext.create('Ext.data.DirectStore', {
   // blah blah configs
   proxy: {
       url: '/my/direct/router/GetNames',
       type: 'direct'
 });

The store will ask the server to call said method and the server will give the store the response. You can do some neat things, and having a readily available and exposed API saves you a lot of the headache of setting up your custom routes, controllers etc.

Ext.Ajax The name says it all: AJAX. Makes a call to a page on your server and returns the response. The main difference here is that this calls a page, not a method. The page may do any number of things (and sure, the method may too), but the page is responsible for formatting the output - JSON, XML, etc. The server-side Direct methods will ultimately format the output too, but usually a router is written that handles the calling of the method and the output formatting. Ext.Ajax is much easier to deal with as it requires virtually no setup aside from having the page at the other end that handles the AJAX request, while Direct requires some back-end classes to handle routing, API exposure, etc. There are plugins for different frameworks (Kohana, CodeIgnitor, probably WordPress etc) and rolling your own can't possibly be difficult. For fairness, example Ext.Ajax:

// Server-side - code of /ajax.php
echo(json_encode(array(
    'DATA' => array(
        array('id' => 3, 'name' => 'john'), 
        array('id' => 4, 'name' => 'Jill')
     )
));

// Client-side
var store = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'], // You should really use a model
    proxy: {
        type: 'ajax',
        url: '/ajax.php',
        reader: {
            type: 'json',
            root: 'DATA'
        }
    }
});

I hope this gives you some perspective, but really you should understand how each one works and apply the solution that is best for you and your situation. Reading the Ext API pages for both is a good place to start, and the Samples & Demos page features examples for both.

Ext.Direct VS Ext.Ajax

1 Answers