1. #1
    Sencha User
    Join Date
    Feb 2014
    Location
    Austria
    Posts
    30
    Answers
    4
    Vote Rating
    0
    Nutribase is on a distinguished road

      0  

    Default Answered: JSONP store in masterdetail sample

    Answered: JSONP store in masterdetail sample


    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

  2. Quote Originally Posted by Nutribase View Post
    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.

    Quote Originally Posted by Nutribase View Post
    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.

  3. #2
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    219
    Answers
    23
    Vote Rating
    6
    u25771 is on a distinguished road

      0  

    Default


    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!
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

  4. #3
    Sencha User
    Join Date
    Feb 2014
    Location
    Austria
    Posts
    30
    Answers
    4
    Vote Rating
    0
    Nutribase is on a distinguished road

      0  

    Default


    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).

  5. #4
    Sencha User
    Join Date
    Feb 2014
    Location
    Austria
    Posts
    30
    Answers
    4
    Vote Rating
    0
    Nutribase is on a distinguished road

      0  

    Default


    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.?

  6. #5
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,855
    Answers
    325
    Vote Rating
    126
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    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?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  7. #6
    Sencha User
    Join Date
    Feb 2014
    Location
    Austria
    Posts
    30
    Answers
    4
    Vote Rating
    0
    Nutribase is on a distinguished road

      0  

    Default


    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

  8. #7
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    219
    Answers
    23
    Vote Rating
    6
    u25771 is on a distinguished road

      0  

    Default


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


    Code:
    Ext.getStore('MyJsonPStore').load();
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

  9. #8
    Sencha User
    Join Date
    Feb 2014
    Location
    Austria
    Posts
    30
    Answers
    4
    Vote Rating
    0
    Nutribase is on a distinguished road

      0  

    Default


    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'
                }
            }
        }
    });


  10. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3462
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Quote Originally Posted by Nutribase View Post
    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.

    Quote Originally Posted by Nutribase View Post
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  11. #10
    Sencha User
    Join Date
    Feb 2014
    Location
    Austria
    Posts
    30
    Answers
    4
    Vote Rating
    0
    Nutribase is on a distinguished road

      0  

    Default


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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi