1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    alexgrimaldi is on a distinguished road

      0  

    Default Unanswered: Complex JSON to populate drop-downs

    Unanswered: Complex JSON to populate drop-downs


    Hi All,


    I have to populate two drop-downs according to the data contained in a JSON file.


    The first drop-down should contain the organisation name. The second drop-down should contain the name of those sites which belong to the organisation selected using the first drop-down.


    I have been banging my head against it for the last two days. Any help is very much appreciated.


    This is my JSON:

    Code:
    {
        "organization": [
            {
                "id": 1,
                "name" : "ORG 1",
                "site": [
                    {
                        "id":1,
                        "name":"site01"
                    },
                    {
                        "id":2,
                        "name":"site02"
                    },
                    {
                        "id":3,
                        "name":"site03"
                    },
                    {
                        "id":4,
                        "name":"site04"
                    },
                    {
                        "id":5,
                        "name":"site05"
                    }
    
    
                ]
            },
            {
                "id": 2,
                "name" : "ORG 2",
                "site": [
                    {
                        "id":6,
                        "name":"site06"
                    },
                    {
                        "id":7,
                        "name":"site07"
                    }
                ]
            },
            {
                "id": 3,
                "name" : "ORG 3",
                "site": [
                    {
                        "id":8,
                        "name":"site01"
                    },
                    {
                        "id":9,
                        "name":"site09"
                    },
                    {
                        "id":10,
                        "name":"site10"
                    }
                ]
            },
            {
                "id": 4,
                "name" : "ORG 4"
            }
        ]
    }
    Many Thanks,
    Alex

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    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

      0  

    Default


    Give the organization a hasMany association so that when you execute the getter method on the organization record it will return a store filled with records for the sites
    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.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    alexgrimaldi is on a distinguished road

      0  

    Default


    Thanks for helping. Do I have to use the same store for both the drop-downs?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    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

      0  

    Default


    When you execute the get method, it will return a new store instance. If you wanted to just use one drop down then you can use a nested list and tree store for this also.
    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.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    alexgrimaldi is on a distinguished road

      0  

    Default


    I do not mean to abuse your brain. That is what I am doing right now (within a component of mine) The code marked in red fails:

    {
    xtype: 'selectfield',
    name: 'customerOrganisationOptions',
    id :'organisationId',
    store: orgStore,
    displayField: 'name',
    valueField: 'id',
    placeHolder : 'Select an organisation',
    action :'selectOrganisationAction'
    },
    {
    xtype: 'selectfield',
    name: 'customerSiteOptions',
    id :'siteId',
    store: orgStore,
    displayField: 'site.name',
    valueField: 'site.id',
    placeHolder : 'No Site available',
    action :'selectSiteAction'
    }

    Once again thanks!

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    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

      0  

    Default


    site is an array not an object.
    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.

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    alexgrimaldi is on a distinguished road

      0  

    Default


    You are right and sorry to bother you so much. How can I point my selectfield to the filed to display?

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    alexgrimaldi is on a distinguished road

      0  

    Default


    Just in case anyone is interested in knowing how I sorted this out.
    I do not create my drop-down using xtype but I generate them dynamically in my controller where I have got full control on the data and stores.

    Mitchell, thanks anyway :-)

Thread Participants: 1

Tags for this Thread