1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    38
    Vote Rating
    0
    dboy221 is on a distinguished road

      0  

    Default Binding to NestedList Component from Web Service

    Binding to NestedList Component from Web Service


    I am attempting to consume a WCF service that returns JSON in the format disclosed below. I am able to bind to the rootProperty "GetStormNoticesResult", however when attempting to access the child node "Notices", I keep get the root level listing. My question is aside from the examples on Nested List that provide a specific "text/item" format of JSON, how do I bind a NestedList where I do not have specific control over the format of the JSON or quite simply are there examples out there with Nested Lists that consume web services and not local .json data files? Thanks in advance.

    Code:
    { "GetStormNoticesResult" : [ { "HurricaneSeason" : "/Date(1338523200000-0400)/",
            "ID" : 1,
            "Name" : "Tropical Storm/Hurricane Isaac",
            "Notices" : [ { "ID" : 1,
                  "ImageUrl" : "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Isaac_2012_track.png/800px-Isaac_2012_track.png",
                  "Message" : "Hurricane Isaac was a slow-moving tropical cyclone that caused severe damage along the northern Gulf Coast of the United States in late-August 2012. Prior to becoming a hurricane, Isaac attained one of the lowest barometric pressure measurements, on August 28, for any storm below hurricane strength, with a pressure of 976. The ninth tropical cyclone, ninth named storm, and fourth hurricane of the 2012 Atlantic hurricane season, Isaac developed from a tropical wave located east of the Lesser Antilles on August 21, strengthening into a tropical storm later that day. Isaac passed over Hispaniola and Cuba as a strong tropical storm, killing at least 34 people in Hispaniola, before it entered the Gulf of Mexico.",
                  "PostDate" : "/Date(1349710020000-0400)/",
                  "Subject" : "First Notice"
                },
                { "ID" : 2,
                  "ImageUrl" : "http://i.imwx.com/common/articles/images/pecans_650x366.jpg",
                  "Message" : "BATON ROUGE, La. — Hurricane Isaac has cut Louisiana's pecan harvest by 15 percent, Louisiana State University's AgCenter estimates.",
                  "PostDate" : "/Date(1349710320000-0400)/",
                  "Subject" : "Isaac Blamed for Reduced Pecan Crop"
                }
              ]
          },
          { "HurricaneSeason" : "/Date(715017600000-0400)/",
            "ID" : 2,
            "Name" : "Hurricane Andrew",
            "Notices" : null
          }
        ] }
    Last edited by aconran; 9 Oct 2012 at 2:10 PM. Reason: Format JSON

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,226
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    This should be no problem to consume via a JsonStore.

    Could you post your Store configuration?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    38
    Vote Rating
    0
    dboy221 is on a distinguished road

      0  

    Default Configuration of NestedTreeSotre

    Configuration of NestedTreeSotre


    Here's the store configuration as configured with architect.

    Code:
    Ext.define('CatApp.store.NoticeTreeStore', {    extend: 'Ext.data.TreeStore',
        alias: 'store.noticeTreeStore',
    
    
        requires: [
            'CatApp.model.StormModel'
        ],
    
    
        config: {
            autoLoad: true,
            model: 'CatApp.model.StormModel',
            storeId: 'noticeTreeStore',
            proxy: {
                type: 'jsonp',
                url: 'http://localhost:49848/ResourceWebService.svc/GetStormNotices',
                reader: {
                    type: 'json',
                    idProperty: 'id',
                    rootProperty: 'GetStormNoticesResult'
                }
            }
        }
    });

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,226
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Looks fine aside from "id" should be "ID".

    What does your model look like?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    38
    Vote Rating
    0
    dboy221 is on a distinguished road

      0  

    Default


    I changed the idProperty on the reader to 'ID' as you mentioned and now when drilling down from the root, I just get the "Loading" message. I'm not clear on what the 'ID' property is actually doing (as I've read the ? help icon on the property), can you clarify a little more on this purpose as it relates to the reader? Also here is the code for the model

    Code:
    Ext.define('CatApp.model.StormModel', {    extend: 'Ext.data.Model',
        alias: 'model.stormmodel',
    
    
        config: {
            clientIdProperty: 'stormModel',
            idProperty: 'ID',
            fields: [
                {
                    name: 'ID',
                    type: 'int'
                },
                {
                    name: 'Name',
                    type: 'string'
                },
                {
                    name: 'HurricaneSeason',
                    type: 'date'
                }
            ]
        }
    });

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,226
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    It determines how to create records what field you have maps to an id.

    You will also need to add a Notices field to get the data in the model.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    Jul 2012
    Posts
    38
    Vote Rating
    0
    dboy221 is on a distinguished road

      0  

    Default


    I went ahead and added "Notices" to the model and it still just hangs like it wants to load.

  8. #8
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,226
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    "hangs like it wants to load"?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  9. #9
    Sencha User
    Join Date
    Jul 2012
    Posts
    38
    Vote Rating
    0
    dboy221 is on a distinguished road

      0  

    Default


    Sorry, LOL, guess I wasn't clear enough. I mean I am able to see the root of the JSON in this case GetStormResult in the NestedListView, however when selecting one of the nodes to drill down into the "Notices" child, it displays the "Loading" dialogue/module and nothing happens from there. The "Loading" dialogue just stays there spinning and basically kills the entire browser (both Chrome and Safari).

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    38
    Vote Rating
    0
    dboy221 is on a distinguished road

      0  

    Default


    Here is a screen shot of what is happening. I've selected "Tropical Storm/Hurricane Isaac" from the root level listing and attempt to go into the child "Notices", but this is the screen I'm presented with. This just sits here with the "Loading" Dialogue going and eventually kills the browser functionality all together.
    Attached Images

Thread Participants: 1