JSONP store in masterdetail sample

**Nutribase** · 3 Mar 2014, 9:55 PM

Hi,

I am just about to explore sencha architect and have created a project based on the MasterDetail template. Now I wanted to replace the existing store by a store that can access data from another domain. For simulation of the data response I entered the following data into mocky.io (thats also what mocky returns when opening the url):

Code:

            {                 "id": "1",                 
                               "firstName": "Max",                 
                               "lastName": "Mustermann""             
            }

The initially used store looks like this:

Code:

Ext.define('MasterDetail.store.People', {
    extend: 'Ext.data.Store',

    requires: [
        'MasterDetail.model.Person',
        'Ext.data.proxy.Memory',
        'Ext.util.Sorter'
    ],

    config: {
        autoLoad: true,
        data: [
            {
                id: 1,
                firstName: 'Max',
                lastName: 'Mustermann',
            }
        ],
        groupField: 'range',
        model: 'MasterDetail.model.Person',
        storeId: 'People',
        proxy: {
            type: 'memory'
        },
        sorters: {
            property: 'lastName'
        }
    }
});

The new store looks like this

Code:

Ext.define('MasterDetail.store.MyJsonPStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MasterDetail.model.Person',
        'Ext.data.proxy.JsonP',
        'Ext.data.reader.Json'
    ],

    config: {
        model: 'MasterDetail.model.Person',
        storeId: 'MyJsonPStore',
        proxy: {
            type: 'jsonp',
            url: 'http://www.mocky.io/v2/531567e60aed02d001449883',
            reader: {
                type: 'json'
            }
        }
    }
});

When I try to start the application i get only an empty screen with an empty title bar.

Thanks in advance for your suggestions

Peter

mitchellsimoens

Originally Posted by Nutribase

There seems still be an issue with the callback.
Now I get the error message
Uncaught SyntaxError: Unexpected token :

Is there something wrong in the callback?

This error would tell me that the response is not valid.

Originally Posted by Nutribase

Thats what I get from mocky.io

Code:

callback("persons": [{"id": 1,"firstName":"Max","lastName":"Mustermann"}]);

Maybe it's just a copy/paste issue but that isn't valid javascript at all. Also, the callback function needs to match the function name sent in the request which is something like "Ext.data.JsonP.callback01". Something like this is more valid:

Code:

Ext.data.JsonP.callback01({"persons": [{"id": 1,"firstName":"Max","lastName":"Mustermann"}]});

I changed the callback function name, this would have to match whatever is in the request's callback parameter. I also added curly brackets around the data to make it an object which will make it valid javascript. Changes are highlighted in red.

**u25771** · 4 Mar 2014, 12:48 AM

Code:

{
    "id": "1",               
     "firstName": "Max",               
     "lastName": "Mustermann""             
}

This is not JsonP at all... I think you will get a callback error in your debug console... Use an ajax proxy... I suggest you to use chrome to debug applications, the chrome debugging console is quite well!

**Nutribase** · 4 Mar 2014, 8:53 PM

I first used a JSON store with an AJAX proxy but I got the message that the URL is not at the same location as my application and I should use JSONP instead.
In crome I did not get errors in the console but warnings I could not see (nothig happens when I click on the warnings icon)
Now I used again the AJAX proxy with the same data on mocky.io and I do not get any error or warning in the chrome console but the result is still the same (empty screen).

**Nutribase** · 4 Mar 2014, 8:57 PM

The source code I get in chrome is only the index.html file of my application

HTML Code:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>masterdetail</title> 
    <script> 
        var Ext = Ext || {}; 
        Ext.theme = { 
            name: "Default" 
        }; 
    </script> 
    <script src="http://cdn.sencha.com/touch/sencha-touch-2.3.1a/sencha-touch-all.js"></script> 
    <link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.3.1a/resources/css/sencha-touch.css"> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body></body> 
</html>

How can I add additional debug information.?

**fmoseley** · 5 Mar 2014, 1:10 PM

Check the Chrome Dev Tools network panel to check the status of your request to 'http://www.mocky.io/v2/531567e60aed02d001449883'
Verify the response from the server?

**Nutribase** · 5 Mar 2014, 9:11 PM

There was no request/response from mocky.io at all.

MasterDetail_network_traffic.png

Do I have to add something in the controller to send a request and get a response?

I also adapted the mocky.io response (which currently seems not be the problem as there is no request sent):

Code:

{"message": {"text": "OK", "code": 0, "version": "1.1.1"},, "persons": [{"id": "1","firstName","Max","lastName","Mustermann"}]}

rootProperty: 'persons'
was added to the reader

**u25771** · 6 Mar 2014, 6:40 AM

Of course you need to load the store id you done have autoLoad set true...

Code:

Ext.getStore('MyJsonPStore').load();

**Nutribase** · 6 Mar 2014, 9:39 PM

Oh, I see, thanks.

There seems still be an issue with the callback.
Now I get the error message
Uncaught SyntaxError: Unexpected token :

Is there something wrong in the callback?

Thats what I get from mocky.io

callback("persons": [{"id": 1,"firstName":"Max","lastName":"Mustermann"}]);

From my controller:

Code:

    launch: function() {
                   var me = this;

                    // Get data from mocky.io
                    me.getData(function (store) {

                    // Bind data to the list and display it
                    //me.getDatalist().setstore(store);

                    });

    },

    getData: function(callback) {
                    var store = Ext.data.StoreManager.lookup('MyJsonPStore'),
                        url = 'http://www.mocky.io/v2/53195821a8328cf600eede71?callback=callback';
                    store.getProxy().setUrl(url);
                    store.load(function() {
                        callback(store);
                    });

    }

My Model:

Code:

Ext.define('MasterDetail.model.Person', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field'
    ],

    config: {
        fields: [
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'firstName',
                type: 'string'
            },
            {
                name: 'lastName',
                type: 'string'
            }
        ]
    }
});

My JSONP store:

Code:

Ext.define('MasterDetail.store.MyJsonPStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MasterDetail.model.Person',
        'Ext.data.proxy.JsonP',
        'Ext.data.reader.Json'
    ],

    config: {
        model: 'MasterDetail.model.Person',
        storeId: 'MyJsonPStore',
        proxy: {
            type: 'jsonp',
            url: '',
            reader: {
                type: 'json',
                rootProperty: 'persons'
            }
        }
    }
});

**mitchellsimoens** · 7 Mar 2014, 6:06 AM

Originally Posted by Nutribase

There seems still be an issue with the callback.
Now I get the error message
Uncaught SyntaxError: Unexpected token :

Is there something wrong in the callback?

This error would tell me that the response is not valid.

Originally Posted by Nutribase

Thats what I get from mocky.io

Code:

callback("persons": [{"id": 1,"firstName":"Max","lastName":"Mustermann"}]);

Maybe it's just a copy/paste issue but that isn't valid javascript at all. Also, the callback function needs to match the function name sent in the request which is something like "Ext.data.JsonP.callback01". Something like this is more valid:

Code:

Ext.data.JsonP.callback01({"persons": [{"id": 1,"firstName":"Max","lastName":"Mustermann"}]});

I changed the callback function name, this would have to match whatever is in the request's callback parameter. I also added curly brackets around the data to make it an object which will make it valid javascript. Changes are highlighted in red.

**Nutribase** · 7 Mar 2014, 2:22 PM

Thank you very much. Now it works.
I do not know why but now it automatically adds 'Ext.data.JsonP.callback1' in front.

Thread: JSONP store in masterdetail sample

Thread Tools

Search Thread

Display

Answered: JSONP store in masterdetail sample

Posting Permissions