Complex JSON to populate drop-downs

[alexgrimaldi]

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:

{
    "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

[mitchellsimoens]

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

[alexgrimaldi]

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

[mitchellsimoens]

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.

[alexgrimaldi]

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!

[mitchellsimoens]

site is an array not an object.

[alexgrimaldi]

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

[alexgrimaldi]

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