PDA

View Full Version : Ext Direct API throws You're trying to decode an invalid JSON String:



badgerb1
16 Feb 2012, 12:50 PM
Hello,

When I attempt to set up an Ext Direct API setting in the designer, I get this error box and the Ext Direct setup does not work.

You're trying to decode an invalid JSON String: Ext.ns('Ext.app'); Ext.app.REMOTING_API = { "url" : "/demo/controller/router", "type" : "remoting", "actions" : { "namedService" : [ { "name" : "showDetails", "params" : [ "firstName", "lastName", "age" ] } ] } };

Source Class: Ext.JSON
Source Method: decode

The really strange thing is that this is occurring ONLY when I attempt to make the request to my localhost, When I attempt to connect to
http://extdirectspring.ralscha.ch/demo/controller/api-debug.js?group=named

It works.

badgerb1
16 Feb 2012, 1:49 PM
Right after I posted I discovered the issue.

Apparently there's an undocumented (at least as far as I can tell) format=json parameter that is automatically added to the request by Designer.

Designer then expects the following format for the json response.

{ "descriptor" : "Ext.app.REMOTING_API", "url" : "http://localhost:8080/demo/controller/router", "type" : "remoting", "actions" : { "namedService" : [ { "name" : "showDetails", "params" : [ "firstName", "lastName", "age" ] } ] }}I did eventually find a reference to this in the forum as well, and it says:
"If your Ext Direct router does not support the format=json parameter, then it is not following the recommended spec"
I searched everywhere I could to find a spec on this and there doesn't seem to be any documentation on it. Also it's not the router component that needs to accept the format parameter it's the API component.

Hopefully, this will be documented better soon. This documentation, which is the only official documentation I can find, doesn't say anything about the "format" parameter.
http://www.sencha.com/products/extjs/extdirect
(http://www.sencha.com/products/extjs/extdirect)

Phil.Strong
21 Feb 2012, 12:53 PM
Well isn't it also because by default we give your Direct Store a JSON reader. You can transform this into an xml or array reader as well.

badgerb1
22 Feb 2012, 11:37 AM
Hi Phil,

No this was actually in the Designer itself not in the Store. When you give Designer an API destination (Project Settings/Ext Direct API), Designer makes a call to the API and expects it to return the API definition in a JSON response not as a javascript response like it shows in the http://www.sencha.com/products/extjs/extdirect documentation. So this is before the store is even defined or any use of Direct is attempted.

Once the designer has the API definition it correctly resolves the api config object in the Direct Store. and the directFn config option shows the dropdown of choices properly as well.

To reproduce, change your server API controller to return only the javascript version of the API like it shows in the API section of the documentation. (Note this will mean turning off the format='json' parameter handling since the Designer adds that parameter automatically).

Ext.app.REMOTING_API = { "url":"remote\/router.php", "type":"remoting", "actions":{ "AlbumList":[{ "name":"getAll", "len":0 },{ "name":"add", "len":1 }] }};
Instead of this format:

{ "descriptor" : "Ext.app.REMOTING_API",
"url" : "remote/router.php",
"type" : "remoting",
"actions" : {
"AlbumList" : [
{
"name" : "getAll",
"len" :0},
{ "name":"add",
"len":1
}
]
}}

Then change the API definition in the project settings of designer and save. The error should occur immediately.

Thanks
Bob

Phil.Strong
22 Feb 2012, 6:57 PM
Ah this is more clear now thank you! Bharat has been working hard over the last week updating Direct in Designer so I'm going to let him update here. Seems like an oversight.

badgerb1
23 Feb 2012, 5:50 AM
Cool, makes sense as an oversight. Just wanted to give you guys as much info as possible so the docs can be updated.

Thanks
Bob

bharatn
23 Feb 2012, 9:11 AM
Hi Bob,

The api.php does return javascript. I am using standard Ext 4 example which returns


Ext.ns("Ext.app"); Ext.app.REMOTING_API = {"url":"php\/router.php","type":"remoting","actions":{"TestAction":[{"name":"doEcho","len":1},{"name":"multiply","len":1},{"name":"getTree","len":1},{"name":"getGrid","len":1},{"name":"showDetails","params":["firstName","lastName","age"]}],"Profile":[{"name":"getBasicInfo","len":2},{"name":"getPhoneInfo","len":1},{"name":"getLocationInfo","len":1},{"name":"updateBasicInfo","len":0,"formHandler":true}]}};

Thanks

badgerb1
23 Feb 2012, 12:01 PM
Hi Bharat,

Yep, but, if you add a parameter of format=json to your request, the API is apparently supposed to return a json version which is slightly different.

Sencha Designer, automatically adds this parameter to the URL you give it when defining your ext direct setup, and my server didn't know to respond with json for the API definition in this case so Designer threw the error when it tried to parse the javascript API definition as a json object.

Now that I know about the format parameter, I've been able to use Designer just fine. The parameter should be added to the API documentation http://www.sencha.com/products/extjs/extdirect since there's no mention of a format parameter in the API section (or anywhere on that page). Also it should be noted in the Designer help to say that the designer will automatically make the Ext Direct API configuration request using the format=json parameter.

Thanks guys,
Bob

stewardsencha
18 Apr 2012, 4:47 PM
For php see http://www.sencha.com/forum/showthread.php?102357-Extremely-Easy-Ext.Direct-integration-with-PHP

That class is pretty sweet and handles it automagically.

But when I plug the url into the designer (architecturer?) I get red squiggles. No message. Yet this is a working url. If I plop it into a browser I get the expected json. And my app uses it fine.

By playing around I can get a message to flicker "Ext Remoting specification failed to load". At this point I might inspect the network tab... do you have a console window (heh heh)?

In case it suggests anything, the generated html is


Ext.ns("");
= {"url":"http://mysite.dev/index.php/direct/crud/service/vmaster","type":"remoting","actions":{"CrudService":[{"name":"read","len":0},{"name":"update","len":0},{"name":"destroy","len":0},{"name":"GridView","len":1},{"name":"where","len":2}]}};
Ext.Direct.addProvider();



Also I wonder about how to make the designer aware of additional remoting providers.


I love this tool guys, I ache for it. But it sucks the hours away every bit as much as the core.

badgerb1
19 Apr 2012, 5:09 AM
Hi Steward,

Had much the same problem with our in house generated API. The problem is probably because the format of the file returned by your php isn't the json version. To test this in a browser, put your URL that you are trying to connect to into the browser and add format=json at the end of it (designer adds this by default and you don't know it).

The designer expects a pure json. So make sure this is all that gets returned by the API when it has the format=json added to it. It can't have the Ext.ns("") or the Ext.Direct.addProvider(); portions and the json has to include the "descriptor" as is shown below.

{ "descriptor" : "Ext.app.REMOTING_API",
"url" : "remote/router.php",
"type" : "remoting",
"actions" : {
"AlbumList" : [
{
"name" : "getAll",
"len" :0},
{ "name":"add",
"len":1
}
]
}}

Thanks
Bob

aconran
19 Apr 2012, 7:57 AM
The designer expects a pure json. So make sure this is all that gets returned by the API when it has the format=json added to it.
Confirmed.

stewardsencha
19 Apr 2012, 9:02 AM
(designer adds this by default and you don't know it).

Sencha never told me, no. But Bruni did. As mentioned, his class handles it. Or used to.

I cut and pasted your example but it generates a syntax error in the browser. (see attached) What more do I need to know please?

I am still wondering how we will be able to specify additional remoting providers.



return Response::make('{"descriptor" : "Ext.app.REMOTING_API","url" : "remote/router.php",
"type" : "remoting",
"actions" : {
"AlbumList" : [
{
"name" : "getAll",
"len" :0},
{ "name":"add",
"len":1
}
]
}}
',200, array('Content-Type','text/javascript'));

bharatn
19 Apr 2012, 11:30 AM
I setup the Direct example on XP with WAMP. I could see the Load data option once i setup the store/model/fields/direct api url, url prefix and directFn. The data was not getting loaded in the store. I had to make one change - In php settings, i had to turn "display errors" off since the php that ships with Ext examples is not very clean. Once i did that i was able to load and see the data in the grid.

If you guys have more inputs on this please let me know.
Thanks

stewardsencha
19 Apr 2012, 11:49 AM
Would you post a zip, or be more specific about where you are getting "the Direct example"?

I am out of bullets, this is a show-stopper for me.

bharatn
19 Apr 2012, 11:58 AM
I copy the php directory from Ext4.0.7/examples/direct/php. Rest i hand create within Architect.

stewardsencha
19 Apr 2012, 1:20 PM
Thanks. 24hrs was all I had. Will try again later.

After so long ramping up, I am finally starting to have a little fun actually doing something with extjs.

It is too disheartening to go back to staring at the screen!