Help With JSONP Request and Basics

[indieangler]

Hello. First off, I'm entirely new to Sencha and ExtJS. I've done my fair share of HTML, CSS, and JavaScript coding and I've coded some things in PHP and Perl but I'm no developer by any means. I like to think that I'm not absolutely retarded but I maybe getting closer after messing with Sencha Touch for a few days. Sencha Touch seems really neat and I've been playing with the website, trying to read the API documents, and thumbing through the examples.

I'm trying to make an easy page that displays custom JSON feed data from an external server. I've looked through the examples of JSONP, YQL, and AJAX but I'm still not able to put all of the pieces together as I'm missing some basic knowledge of how it's all structured in general. For my JSON example file, I'll use the following:



"blogs":[{
"title":"Title Data Here",
"post":"Post Data Here",
"date":"Date Value Here",
"link": "URL Value Here"
},{
"title":"Title Data Here",
"post":"Post Data Here",
"date":"Date Value Here",
"link": "URL Value Here"
}
]

I've used this in other places so I'm sure the data is fine and that's not the problem I'm having trouble with, just using Sencha Touch is what's confusing me. Taking code from the samples I've got the following code:



var blogTpl = new Ext.XTemplate([
'<tpl for="item">',
'<h2><a href="{link}" target="_blank">{title}</a><small> on {date}</small></h2>',
'<p>{post}</p>',
'</tpl>'
]);

var makeJSONPRequest = function() {
demos.Data.update('');
Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>');
Ext.util.JSONP.request({
url: 'http://www.myurl.com/feed/',
callbackKey: 'callback',
callback: function(result) {
var blogpost = result.data.blogpost;
if (blogpost) {
demos.Data.update(blogTpl.applyTemplate(blogpost));
demos.Data.scroller.scrollTo({x: 0, y: 0});
}
else {
alert('There was an error retrieving the blog post.');
}
Ext.getBody().unmask();
}
});
};
So the top section of code is the template I want applied to the data shot back. Obviously the second part is the JSONP request. I've tried using this in several different methods but none of it is working for me. I'm not sure if the problem is in the way I'm handling some of the code above.

If someone could provide me a simple working example of a scenario like this, I'd be forever eternally grateful. I'm excited about learning Sencha Touch, I'm just having some problems putting the basics together to get up and running for my first small app. Any insights would be greatly appreciated on how to handle this type of code.

[TommyMaintz]

I am not sure what the issue was you were encountering, but my first guess is that your template was wrong. The tpl for="" is to loop over an array of items and apply the template to each one. You seem to be retrieving one particular post, and update the component with the data of that post. If that is the case, you would probably want to something like the following.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
layout: 'card',
indicator: false,
onReady: function() {
var postPanel = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
tpl: new Ext.XTemplate([
'<h2><a href="{link}" target="_blank">{title}</a><small> on {date}</small></h2>',
'<p>{post}</p>'
]);
});

Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>');

Ext.util.JSONP.request({
url: 'http://www.myurl.com/feed/',
callbackKey: 'callback',
callback: function(result) {
var blogpost = result.data.blogpost;
if (blogpost) {
postPanel.update(blogpost);
postPanel.scroller.scrollTo({x: 0, y: 0});
}
else {
alert('There was an error retrieving the blog post.');
}
Ext.getBody().unmask();
}
});
}
});