Sencha Touch cross-domain jsonp returns a syntax error

Question

I have the following code to retrieve the a JSON structure from another domain and display it on the page.

However, nothing appears and I get the this error in the console:

Uncaught SyntaxError: Unexpected token : People.json:2

I've passed my JSON into a JSON validator and it came back as valid.

Here is my code:

    Ext.define("Person", {
        extend: "Ext.data.Model",
        config: {
            fields: [
                { name: 'Id', type: 'int'},
                { name: 'Name', type: 'string'},
                { name: 'Email', type: 'string'}
            ]
        }
    });

    var myStore = Ext.create("Ext.data.Store", {
        model: "Person",
        proxy: {
            type: "jsonp",
            url: 'http://example.com/People.json',
            reader: {
                type: "json",
                rootProperty: "Person"
            }
        },
        autoLoad: true
    });

    Ext.create("Ext.List", {
        fullscreen: true,
        store: myStore,
        itemTpl: "{Name}, {Id}"
    });

Here are the contents of my JSON file:

{
    "Person": [
        {
            "Id": 0,
            "Name": "Robert Lara",
            "Email": "rolara@example.com"
        },
        {
            "Id": 1,
            "Name": "Tom Hicks",
            "Email": "tohicks@example.com"
        }
    ]
}

Answer 1

JSONP is not literally transporting JSON, it expects http://example.com/People.json to be Javascript file calling a callback function.

You have taken care of the client side part of JSONP using Sencha, but you have to prepare server side to work with it.

The Sencha docs on JSONP have a paragraph and some code examples under the title Implementing on the server side:

Also this StackOverflow question explains what JSONP is all about.