Sencha Touch and PHP Webservice - php

Question

I'm currently learning sencha touch and as a test i wrote a little webservice and i want to display the resulting items in a list
But i can't get it to work...
Ext.define('GS.view.ListTest', {
extend: 'Ext.navigation.View',
requires:[
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
xtype:'listpanel',
config: {
title: 'Fifa List',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{Player1}',
store: {
autoLoad: true,
fields: ['MatchID','Player1', 'ScorePlayer1' ,'ScorePlayer2','Player2'],
proxy: {
type: 'jsonp',
url: 'http://fifa.verhulstrobin.be/webservices/getMatches.php',
reader: {
type:'json',
rootProperty: 'matches'
}
}
}
}
}
});
I check and my json is valid ...
All it says in the console is Uncaught SyntaxError: Unexpected token :

Answer 1

try this
items: {
xtype: 'list',
itemTpl: '{match.Player1}',
store:new Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['match'],
proxy: {
type: 'jsonp',
url: 'http://fifa.verhulstrobin.be/webservices/getMatches.php',
reader: {
type:'json',
rootProperty: 'matches'
}
})
}
}

Answer 2

Try something like this instead :
items: {
xtype: 'list',
itemTpl: '{match.Player1}',
store: {
autoLoad: true,
fields: ['match'],
proxy: {
type: 'jsonp',
url: 'http://fifa.verhulstrobin.be/webservices/getMatches.php',
reader: {
type:'json',
rootProperty: 'matches'
}
}
}
}
Hope this helps

Answer 3

Looking at your webservice response I notice that it does not wrap the JSON answer in a function call like JSONP would require. You need to return an item like this:
Ext.data.JsonP.callback1({});
Where the argument of the function must be your actual JSON data instead of an empty object, and the name of the function "Ext.data.JsonP.callback1" is passed to your webservice as parameter named "callback" by the Ext Store.
You can however customize that parameter's name with callbackKey on the proxy:
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'jsonp',
url : 'http://domainB.com/users',
callbackKey: 'theCallbackFunction' // <--
}
});
For more detailed information on JSONP and how to implement it for an Ext Js Store you could refer to http://en.wikipedia.org/wiki/JSONP
and http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP