Easy Ext.Direct integration with PHP

[j.bruni]

June 23, 2010 UPDATE:

This version is now deprecated.

The code has been refactored, and a new version has just been launched in a new thread:

EXTremely-Easy-Ext.Direct-integration-with-PHP

Now, it is really really easy - I'd say it couldn't be easier.

And, also, full of new features and configurations!

- Ext Designer ready
- Form and file upload handling
- Many classes can be declared in the API
- etc...

From here below, the "old" original post, from three months ago:


Very easy to use.

______________________________________________________________


1) Extend the ExtDirectActions class, like this:

<?php

require 'ExtDirectApp.php';

class MyMath extends ExtDirectActions
{
    public function square( $number )
    {
        return $number * $number;
    }
}

new ExtDirectController( 'MyMath' );

?>

And that's it. This is a fully working sample!

You just need to:
- require "ExtDirectApp.php"
- extend "ExtDirectActions"
- create an "ExtDirectController" instance

The parameter for the Controller constructor must be the name of the API class (i.e., the ExtDirectActions descendant class which will be acessible from the client-side). It is "MyMath" in our example.

Only public methods are included in the API. Protected and private methods are NOT included. Also, only required parameters are counted. Optional parameters (parameters that have a default value) are NOT counted.

Easy! Let's save this file as "app.php"

______________________________________________________________


2) Create a JavaScript template file, like this:

Ext.Direct.addProvider( { 'url': 'app.php', 'type': 'remoting',
    'actions': { 'MyMath': [%actions%] }
} );

Here , you need to:
- use your PHP file path for the "url" (app.php)
- use the API class name in the "actions" object (MyMath)
- use the [%actions%] tag, that will be replaced by the class API definition

Save this file as "app.js"

______________________________________________________________


3) In an HTML file, include the ExtJS required files as usual, and then include your PHP file as the JavaScript source of a "script" tag, as shown below:

<script type="text/javascript" src="app.php"></script>

And, believe me! You are ready!!!

______________________________________________________________


You are now able to call your PHP class methods from JavaScript, using a syntax like this:

MyMath.square( 4, callback );

The "callback" parameter is the callback function that will be executed after the server has delivered the result. The result is the first parameter passed to the callback function. For example:

callback = function(result) { alert( 'Result returned from server:  ' + result ); }

______________________________________________________________

This is the basic usage.

Please, download the "ExtDirectApp.php" file here:

http://www.phpclasses.org/browse/package/6088/

Note that "ExtDirectApp.php" is the only required file.

______________________________________________________________


There are a couple of additional features, that I may elaborate in another post. Let me have some feedback first. Thanks!

[Andrew Peacock]

Hi,
I'm trying to test this out, but this seems only to work with one template file. The template file name and template variables are exposed as public properties, but I just can't seem to make any difference.

Could you provide a demo which shows how to use different templates and/or template variables, please?

Regards,
Andy

[j.bruni]

Hi,
I'm trying to test this out, but this seems only to work with one template file. The template file name and template variables are exposed as public properties, but I just can't seem to make any difference.

Could you provide a demo which shows how to use different templates and/or template variables, please?

Regards,
Andy

Andy, I apologize not answering you before. I have refactored the whole code, and just launched the new version in a new thread.

There is no template in this new version, although internally it is used on ExtDirect::get_api_javascript method (ExtDirect.php, line 126)

If you still want to know about template variables, I will answer your question below (although no demo is available).

You need to create the ExtDirectController with the autorun parameter set to false:

$controller = new ExtDirectController( 'MyClass', false ); 

Then, you need to set the template variables using the "template_elements" property:

$controller->template_elements['[%variable_name%]'] = 'contents of the variable'; 

To manually do what "autorun" does, you need to:

$controller->run();
$controller->output(); 

Anyway, this is not an optimized procedure... I invite you to try the new version (even without "template" capabilities).

Thanks.