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 ';'; 

                }

 }

Get JSON data from Asp.Net web service into ExtJs JSON store

In one of my previous project which was based on SOA, we have used Asp.Net web service to get data from Sql Server. The front end was built using ExtJs. As every one no that Asp.Net web service uses soap protocol which is XML based protocol.

For ExtJs front end we have to use JSON store for data as we were getting data from some other source in JSON format. So we need a response from Asp.Net web service in JSON format. Following the code example of how to get JSON data from Asp.Net web service.

First of all you need to enter Script Service Attribute to the web service.

[System.Web.Script.Services.ScriptService]

public class Service : System.Web.Services.WebService

{

//code of service.

}

A web service with ScriptService attribute by default returns data in JSON format. However it might be the case that in web service some methods return data in XML format so for that you need to add ScriptMethod attribute to specific method which should return data in JSON format.Following is an example of it.

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]

public List GetCustomers()

{

dbDataContext obj= new dbDataContext();

return dc.getCustomers().ToList();

}

So above method when called form ExtJs front end will return data in JSON format. Following is the ExtJs code to call the service.

var storeCustomer = new Ext.data.JsonStore({

proxy: new Ext.data.HttpProxy({

url: 'Service.asmx/GetCustomers',

headers: {

'content-type': 'application/json'

}

}),

root: 'd',

autoLoad : true,

id: 'Customer_Id',

scope : this,

fields: ['Customer_Id', 'CurrentSeller_Id', 'Name']

});

That's it and you have JSON data from Asp.Net web service to your ExtJs front end.