How to call JSONP request in Sencha Touch application - sencha-touch

Question

In my sencha application i need to call jsonp request instead of ajax request but i dont know how to write it.So please provide me demo for jsonp request.
thank You

Answer 1

Sample JSON Request from the Sencha Documentation :)
Here's the link to more details : http://docs.sencha.com/touch/2-0/#!/api/Ext.data.JsonP
Ext.data.JsonP.request({
url: 'http://free.worldweatheronline.com/feed/weather.ashx',
callbackKey: 'callback',
params: {
key: '23f6a0ab24185952101705',
q: '94301', // Palo Alto
format: 'json',
num_of_days: 5
},
success: function(result) {
//Your success function here...
}
});

Answer 2

check the below code working fine for me :)
Ext.define('APP.view.List', {
extend: 'Ext.Container',
requires: [
'Ext.data.JsonP'
],
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'JSONP'
}, {
docked: 'top',
xtype: 'toolbar',
items: [{
text: 'Load using JSON-P',
handler: function() {
var panel = Ext.getCmp('JSONP'),
tpl = new Ext.XTemplate([
'<div class="demo-weather">',
'<tpl for=".">',
'<div class="day">',
'<div class="date">{date}</div>',
'<tpl for="weatherIconUrl">',
'<img src="{value}">',
'</tpl>',
'<span class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></span>',
'</div>',
'</tpl>',
'</div>'
]);
panel.getParent().setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
Ext.data.JsonP.request({
url: 'http://free.worldweatheronline.com/feed/weather.ashx',
callbackKey: 'callback',
params: {
key: '23f6a0ab24185952101705',
q: '94301', // Palo Alto
format: 'json',
num_of_days: 5
},
callback: function(success, result) {
var weather = result.data.weather;
if (weather) {
panel.updateHtml(tpl.applyTemplate(weather));
}
else {
alert('There was an error retrieving the weather.');
}
panel.getParent().unmask();
}
});
}
}]
}]
}
});