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();
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();