NOOB ScriptTagProxy help

[Gneechee]

Howdy all. I'm *very* new to Sencha. I've been using Titanium, and have decided it's not the proper platform for what I want to do, so here I am.

I'm trying to use ScriptTagProxy for a JSONP call. I started with the Ajax sample code in your kitchen sink, mixed it up with code I found in your docs/tutorials, then guessed a bit here and there. I understand what JSONP is and what it's used for, but what I don't understand is how to properly implement your Proxy.

I'm getting the Uncaught SyntaxError: Unexpected token : error that I've seen others here mention, but I can't seem to get past it.

In Chrome's debugger, I can see the url with the callback added to the end of it, but the data returned has no wrapper ... what am I missing?

Any help/guidance/mild chastising/hazing would be greatly appreciated.

Here's the code:



onReady: function() {
Ext.regModel('PFI', {
fields: [ {
"encoding" : {},
"version" : {},
"petfinder" : {
"SchemaLocation" : {},
"header" : {
"status" : {
"code" : { "$t" : {} },
"message" : {}
},
"timestamp" : { "$t" : {} },
"version" : { "$t" : {} }
},
"pet" : {
"age" : { "$t" : {} },
"animal" : { "$t" : {} },
"breeds" : [ { "breed" : { "$t" : {} } } ],
"description" : { "$t" : {} },
"id" : { "$t" : {} },
"lastUpdate" : { "$t" : {} },
"media" : { "photos" : { "photo" : [ { "$t" : {}, "@id" : {}, "@size" : {} } ] } },
"mix" : { "$t" : {} },
"name" : { "$t" : {} },
"options" : [ { } ],
"sex" : { "$t" : {} },
"shelterId" : { "$t" : {} },
"shelterPetId" : { },
"size" : { "$t" : {} },
"status" : { "$t" : {} }
}
}
} ]
});

var tpl = Ext.XTemplate.from('pfi');

var fakeJSONPRequest = function() {
Ext.getBody().mask('Loading...', 'x-mask-loading', false);
var store = new Ext.data.JsonStore({
model: 'PFI',
proxy: {
type: 'scripttag',
url : 'http://api.petfinder.com/pet.getRandom?key=efbe69ea36e6d7ac99aab152db387ab8&output=full&format=json'
}
});

store.load();

try {
var pfi = store.petfinder.pet;
if (pfi) {
var html = tpl.applyTemplate(pfi);
Ext.getCmp('content').update(html);
}
else {
alert('There was an error retrieving the data');
}
Ext.getCmp('status').setTitle('Here\'s one for you!');
}
catch (err) {
alert('There was an error retrieving the data (' + err + ')');
}
Ext.getBody().unmask();
};

fakeJSONPRequest();

[evant]

Seems like the API doesn't support JSONP: http://remysharp.com/2007/10/08/what-is-jsonp/

[Gneechee]

I appreciate the response :)

With Titanium, I created a HTTP client then just sent an XHR GET request with the url ... XHR then returned JSON.

According to the Titanium docs, it doesn't need JSONP ... I guess I never really considered that before, and just assumed that the API supported JSONP (their docs don't say one way or the other), and that Titanium was handling it all internally.

So, does Sencha provide some sort of alternative method for me to do this? Please say yes (and point me in the right direction <G>). The API supports XML, but I'm not familiar/comfortable working with that - but I guess I will if I have to :(

Thanks in advance!

[evant]

JSONP != JSON

It's a limitation imposed by the browser, JSONP is a hack to deal with the same origin policy: http://en.wikipedia.org/wiki/Same_origin_policy

[Gneechee]

I understand that ... I guess I'm grabbing at straws here.

I just really like what I see here with Touch - and I'd truly rather not have to go back to Titanium.

Anyway - thanks :)