Configure Ext.Direct API with Ext Designer

Hello Folks,


Recently I tried Ext Designer for my ExtJs project. I am using Ext.Direct server pack at back end with ExtJs front end. I had a difficult time with Ext Designer to configure it from Ext Direct API. This the blog on this.


Following is the screen of Ext Designer where you have to add ext direct api settings if you are using Ext Direct.

There you have to add URL of your Ext Direct API. For Example

http://localhost/myproject/lib/direct/api.php

If you simple use above URL and try to save data it will give you error that. Ext.Direct remoting specifications failed to load. Actually Ext Designer expects remoting specifications in JSON format and Ext Direct API returns it in pure JavaScript format.

If you open this URL http://localhost/myproject/lib/direct/api.php in browser you will see following output.

Ext.ns('Remoting'); Remoting.API = {"url":"router.php","type":"remoting","actions":{"Time":[{"name":"get","len":0}]},"namespace":"Remoting"};

This is simple JavaScript out put that current Ext Designer version can not understand. It needs it in JSON format. So you need to edit your ext direct server code to support json format. If should support following URL.

http://localhost/myproject/lib/direct/api.php?format=json


Following should be output.

{"url":"router.php","type":"remoting","actions":{"Time":[{"name":"get","len":0}]},"namespace":"Remoting","descriptor":"Uniframe.API"};

Mark the descriptor field now its included in JSON output. This output can easily be interpreted by Ext Designer.

For this you have to edit your Ext direct code to get format from URL and output data accordingly. There might be some other ways to do it but I did it by modifying _print function in ExtDirect/API.php file. 

Following is my modified function.

private function _print($api) {

                   if(isset($_REQUEST['format'])){ 

                         $isJsonFormat = $_REQUEST['format']; 

                            if(strtolower($isJsonFormat) == 'json'){ 

                                  $api['descriptor'] = $this->_descriptor; 

                                  echo json_encode($api); 

                            }

                   }

                  else{ 

                         header('Content-Type: text/javascript'); 

                         echo ($this->_namespace ?
                'Ext.ns(\'' . substr($this->_descriptor, 0,             strrpos($this->_descriptor, '.')) . '\'); ' . $this->_descriptor:
                'Ext.ns(\'Ext.app\'); ' . 'Ext.app.REMOTING_API'
            ); 

                        echo ' = ';
            echo json_encode($api);
            echo ';'; 

                }

 }