Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Can someone help me with a JSONP issue?

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default Answered: Can someone help me with a JSONP issue?

    --> I apologize for the last post, hopefully this edit will make things easier to understand!

    Thank you for your patience...

    There is no issue with JSONP except my newby knowledge gap. First let me explain that this is my first Sencha App, I work in a Visual Studio leaning market here in automationville (Bakersfield, CA) , and I chose Sencha because it's the next great thing in an IDE for JavaScript (I know it is somewhat restrictive, but with JavaScript, you have to be).

    I used the CityBars App as my learning tool. I created exact copies of everything except the Controller (can't duplicate them), and named every new object with either a 1 (as in ListContainer1 vs. ListContainer) or renamed it completely. Yes, there were issues, but I think I am at the last one.

    The CityBars Application uses what looks like either best practices or has the touch of someone who understands the Framework explicitly. I am creating a Well Test Application for folks in the field who do such things. They look at water percentages, crude output, temps and pressures. Oil wells are money. Money that goes to different sinks (banks and people) from a single source (a well). This is why Well Tests are very important. There are royalties to pay different entities based on production.
    Ok, enough background, here is my issue...
    A Record of the REST/JSON data looks like this
    [{"parentFacilityID":5621,"parentFacilityName":"CANTIN","wellBoreID":5558,"wellBoreName":"CANTIN 006","leaseName":"CANTIN}]

    Notice I do not have a namespace on this at this time, otherwise it might look like this:
    wellList: [{"parentFacilityID":5621,"parentFacilityName":"CANTIN","wellBoreID":5558,"wellBoreName":"CANTIN 006","leaseName":"CANTIN
    The rootProperty of the Reader in the original CityBars app is businesses because the Yelp response is businesses:[{keyName:data, keyName:data}]
    Since I have no namespace (yet), I wanted to make this work without one. Mainly because I don't want to start making changes on the server end (I'm doing it all) while trying to troubleshoot data not showing up.
    Here is my reader...
    reader: {
    type: 'json',
    rootProperty: ''
    }
    Will this work with my current payload? If someone says it should, then is there anyone who can advise me about what I might be doing wrong?
    I can explain in greater detail if I am told that this should work. I'm using Charles for tracking HTTP requests, but I also see the Proxy fire off the request in Chrome. I am using the Sencha Application Extension and it works great for peering into the app, but I'm not finding where it can help me trap the request.

    I have followed this in the debugger, and frankly after about 10 minutes of clicking through, I started clicking faster, and lost where the call return is being bound.
    I need to find where the CallBack function (I think) is actually being done, which is well within the Framework. Then I can see the payload and look at the bindings.
    Here is the adjusted Template for the ListContainer1...
    <div class="list-item">
    <img class="photo" src="{photo_url}" />
    <h1>{WellBoreName}</h1><span>{ParentFacilityName}</span>
    </div>
    I am asking if a JSON payload can be displayed without a namespace on the rootProperty of the store's Reader
    and if so...
    How can I effectively troubleshoot a JSON payload arriving and being bound to the View?

    Thank you for your time...
    Curtis

  2. Hello!
    From what I see here, there are multiple moving parts. I will try to answer all/most of them.

    * There is no built in feature in Architect to trace network requests/responses, but once application is being viewed from Browser there are ways to see what is the actual payload and headers/parameters being sent. Your best choice would be to use Google Chrome's developer console. From there you can switch to Network tab at the bottom and watch for requests to your server. From there you would see what information is being returned and is CORS really working in the way it should. If you are not familiar with this section of developer tools this document will help you getting started: https://developer.chrome.com/devtools/docs/network

    * To setup CORS to work properly for Ajax requests (REST proxy is based on ajax calls), you have to explicitly set two properties: 'useDefaultXhrHeader: false', and optionally 'withCredentials: false' like this: Ext.Ajax.setUseDefaultXhrHeader(false); A good location for this would be launch() method.

    * Javascript is case sensitive, so when referencing object names they should match the case. In your Model for example you are defining field 'WellBoreID', but payload has : 'wellBoreID' . This will result in empty store.

    * >> Is there a configuration on the Store or the proxy that makes it handle Collections? (I can't imagine this being necessary)
    Store itself is the collection of Models (records), so no, nothing else is required.

    * 'WellTest.view.WellTestView' is using template to render whatever data is being set. To render multiple lines you would have better results using either DataView or List, where you would set itemTpl to render one of the items that are returned from server. View itself does render only what is set in the template. Although looping is possible and sometimes necessary to achieve certain output, usually it's more practical to leverage components that are specifically built to work with multiple items.

    This should give you the head-start you are looking for.

  3. #2
    Sencha User
    Join Date
    Mar 2012
    Location
    Lawrence, KS
    Posts
    462
    Answers
    65

    Default

    Curtis,

    First off, welcome to Sencha! It can be a bit tricky when you're first getting started with Ext JS, but if you hang in there, I'm positive you'll see many of the benefits.

    JSONP has a few intricacies, which will necessitate some server adaptation. The best place to get started with JSONP and Ext JS 5 is here:
    http://docs.sencha.com/extjs/5.0/api...ta.proxy.JsonP

    The API Docs walk you through the basics of using Ext JS 5 and JSONP along with some tips for what's expected from your server.

    For future reference, you've posted in the Architect 3 section of the forums. Your question is really more related to the frameworks than Architect. It's not a big deal, but you may end up getting more of an expedient response in the framework specific sections of the forums. The Architect section focuses more on the Architect integration side of things.

    Thanks!
    Greg

  4. #3
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Thanks for your response Greg, but I am using the IDE and not understanding how it connects and manages objects and programming techniques that are done via a text editor vs. a Rapid Development product like Architect. So you are suggesting that programming issues related to design within Architect are best handled in other foums?

    Where does that begin? I'm confused about just how Sencha developers get what they need. I really need an answer to my question in a direct manner, but thank you for the pointers.

    Also, I always go to the API docs, but there are not complete enough examples in these docs. They only show code snippets for the lowest common denominator of programming.

    My question also included using the CityBars app as an example of what I am having issues with. Can anyone explain more about the design choices made to demonstrate how to easily construct a working application? Where would I begin to understand what is happening under the covers because the app was programmed using one way verses 10 others?

    If I had the knowledge I am seeking, I would explain the path of execution of the CityBars application to the new guy and turn him loose. But while your comments are appreciated, they do not begin to help me when I am desperate.

    At this point I am still debugging and I really just need an answer to my question "How can I effectively troubleshoot a JSON payload arriving and being bound to the View?"

    I have researched as much as possible before taking the time to explain my issue in as great a detail as possible.

    Thank you,

    Curtis

  5. #4
    Sencha User Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,953
    Answers
    15

    Default

    What's your store look like (code)?

    I want to say that JSONP requires an object be returned. The reason to use JSONP is simply if the server is on a different domain. IF it's the same domain try using JSON proxy instead.
    Phil Strong
    @philstrong

  6. #5
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Wow, thanks for the attention Phil. You are someone I was hoping you would look at this. Let me look into the callback for the service and I will come back to this. I'm using Spring RestFul services and it has it's own issues.

    Here is what I am going to review and then I will come back to you...
    https://spring.io/guides/gs/consuming-rest-sencha/
    https://spring.io/guides/gs/rest-service-cors/

    But yes to your observation about JSONP, I need cross domain service calls.

    Tell Fred in support that I'm happy to have your attention and I should get this explained for others who want to try the same approach.

    I'll be right back to this...

  7. #6
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Update, I got the services running on Glassfish (driven crazy trying to convert the demo's they give into a real Dynamic Web Application) , then I hooked up the sencha 4 example and ran it, and it worked!

    I am now trying to convert this to pulling my service across and displaying it, then convert the code in the Current CityBars demo. I am really down to the wire here, but still grinding.Thanks,Curtis

  8. #7
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Latest Update, Phil, hopefully the break will not lose your attention.I have an example service without callbacks because I am using Spring CORS - I have a Spring service example in it's simplest form returning Hello World as a JSON payload in and array format: {"id":5,"content":"Hello, Curtis!"} is the format arriving.

    This is a simple example used here and running on my Windows VM (I run my services on windows and my development on Mac)
    https://spring.io/guides/gs/consuming-rest-sencha/
    https://spring.io/guides/gs/rest-service-cors/

    There are 4 classes in the consuming consuming-rest-sencha app, the application (hello.js, GreetingModel, GreetingStore, GreetingView - there is no controller) - I have the rest-service-cors working locally and returning --> The ID is 6 The content is Hello, Curtis! with the sencha app.

    I create everything as a copy, and change over to my new model, my new store, and change the template for display and run it and each record that is created in sencha-touch (well only one) comes up populated with undefined as the values.

    The data for the new service comes across as [{"leaseName":"CANTIN","wellBoreName":"CANTIN 006","wellBoreID":5558,"parentFacilityName":"CANTIN","parentFacilityID":5621},{"leaseName":"CANTIN","wellBoreName":"CANTIN 010A","wellBoreID":5582,"parentFacilityName":"CANTIN","parentFacilityID":5621},... }] - Notice the square brackets enclosing the Object Arrays, these should be processed as Collections of Array Objects.

    I am not getting any cross domain errors, the CORS headers are doing their job. This isn't a JSONP store. In fact, here are my classes

    App
    Code:
    Ext.application({
        name: 'WellTest',
        models: [ 'WellTestModel' ],
        stores: [ 'WellTestStore' ],
        views: [ 'WellTestView' ],
        launch: function () {
    
    
            var view = Ext.create('WellTest.view.WellTestView', {});
    
    
            Ext.create('WellTest.store.WellTestStore', {
                autoLoad: true,
                listeners: {
                    load: function (self, records) {
                        view.setData(records[0].getData());
                    }
                }
            });
    
    
        }
    });
    Ext.Loader.setConfig({ disableCaching: true });
    Store
    Code:
    Ext.define('WellTest.store.WellTestStore', {
        extend: 'Ext.data.Store',
        config: {
            model: 'WellTest.model.WellTestModel',
            proxy: {
                type: 'rest',
                url: 'http://192.168.2.106:8080/WellTest/service/wellbore'
            },
            listeners: {
                beforeload: function () {
                    var name = document.location.search.slice(1);
                    this.getProxy().setExtraParam('name', name);
                }
            }
        }
    });
    Model
    Code:
    Ext.define('WellTest.model.WellTestModel', {
        extend: 'Ext.data.Model',
           config: {
               fields: [
                   {
                       name: 'WellBoreID'
                   },
                   {
                       name: 'WellBoreName'
                   },
                   {
                       name: 'ParentFacilityID'
                   },
                   {
                       name: 'ParentFacilityName'
                   },
                   {
                       name: 'LeaseName'
                   }
               ]
        }
    });
    View
    Code:
    Ext.define('WellTest.view.WellTestView', {
        extend: 'Ext.Panel',
        config: {
            fullscreen: true,
            tpl: '<p>Well Name is {wellBoreName}</p><p>The Lease is {leaseName}</p>'
        }
    });



    Is there a configuration on the Store or the proxy that makes it handle Collections? (I can't imagine this being necessary)



    I never in my entire career have ever had this experience with FLEX, Java or other Frameworks NOT created in JavaScript. I'm really not liking this...

    Thanks Phil and the Sencha Team for your fast reply
    Last edited by curtis.fisher; 8 Sep 2014 at 8:41 AM. Reason: Too much whining...

  9. #8
    Sencha User Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,953
    Answers
    15

    Default

    nothing extra needed for collections on store config.

    Have you looked to see what rest call is being made by your store in chrome inspector?

    You can switch to network tab to see what's being requested and responded with.

    Assume the name you are using as an extra param is what you expect?
    Phil Strong
    @philstrong

  10. #9
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    293
    Answers
    2

    Default

    Hello!
    From what I see here, there are multiple moving parts. I will try to answer all/most of them.

    * There is no built in feature in Architect to trace network requests/responses, but once application is being viewed from Browser there are ways to see what is the actual payload and headers/parameters being sent. Your best choice would be to use Google Chrome's developer console. From there you can switch to Network tab at the bottom and watch for requests to your server. From there you would see what information is being returned and is CORS really working in the way it should. If you are not familiar with this section of developer tools this document will help you getting started: https://developer.chrome.com/devtools/docs/network

    * To setup CORS to work properly for Ajax requests (REST proxy is based on ajax calls), you have to explicitly set two properties: 'useDefaultXhrHeader: false', and optionally 'withCredentials: false' like this: Ext.Ajax.setUseDefaultXhrHeader(false); A good location for this would be launch() method.

    * Javascript is case sensitive, so when referencing object names they should match the case. In your Model for example you are defining field 'WellBoreID', but payload has : 'wellBoreID' . This will result in empty store.

    * >> Is there a configuration on the Store or the proxy that makes it handle Collections? (I can't imagine this being necessary)
    Store itself is the collection of Models (records), so no, nothing else is required.

    * 'WellTest.view.WellTestView' is using template to render whatever data is being set. To render multiple lines you would have better results using either DataView or List, where you would set itemTpl to render one of the items that are returned from server. View itself does render only what is set in the template. Although looping is possible and sometimes necessary to achieve certain output, usually it's more practical to leverage components that are specifically built to work with multiple items.

    This should give you the head-start you are looking for.

  11. #10
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Thanks, let me address the capitalization and I will get back to you.

    Thanks!

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •