PDA

View Full Version : NOOB ScriptTagProxy help



Gneechee
1 Jan 2011, 11:50 AM
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
1 Jan 2011, 4:50 PM
Seems like the API doesn't support JSONP: http://remysharp.com/2007/10/08/what-is-jsonp/

Gneechee
1 Jan 2011, 7:46 PM
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
1 Jan 2011, 8:41 PM
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
1 Jan 2011, 8:52 PM
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 :)