loading options for all combo boxes of a form in one nested JSON?

[leizz]

Hi,

I'm pretty new to Ext JS and would like some help on this:
In a long form I have multiple combo boxes. I'd like to load all of their options in one JSON call to save some server round trips. Here is a sample of my JSON:


{
"dropdownChoices": {
"wireTypes": [
{"desc": "Domestic Commercial", "code": "DOM_COMM" },
{"desc": "International Commercial", "code": "INTL_COMM" },
{"desc": "Domestic Bank to Bank", "code": "DOM_BK2BK" },
{"desc": "International Bank to Bank", "code": "INTL_BK2BK" }
],
"customerTypes": [],
"transferInouts": [],
"transferCurrencies": []
}
}And here is my store setup:

DropdownChoicesStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
DropdownChoicesStore.superclass.constructor.call(this, Ext.apply({
storeId: 'dropdownChoicesStore',
url: 'data/dropdownChoices.json',
root: 'dropdownChoices',
autoSave: false,
fields: [
{
name: 'wireTypesDesc',
mapping: 'wireTypes.desc'
},
{
name: 'wireTypesCode',
mapping: 'wireTypes.code'
}
]
}, cfg));
}
});When I try loading the form in browser, I see from FireBug that the JSON file is correctly sent back from the server, but the combo box doesn't display the options correctly.

If I change the store config as below then the dropdown works fine:


root: 'dropdownChoices.wireTypes',
fields: [
{
name: 'wireTypesDesc',
mapping: 'desc'
},
{
name: 'wireTypesCode',
mapping: 'code'
}
]Is there a way to organize the JSON data structure so that the Ext store can accept a 'parent-store' while allowing field mappings point into the nested "sub-stores"?

Could anyone help?

Thanks,
leizz

[Condor]

You don't need a store for this. Do an Ext.Ajax.request and Ext.decode the response.responseText.

Configure the stores for you comboboxes to use the correct root, so you can call combo.store.loadData(responseData) on each.

[leizz]

Thanks Condor.

So I will do the following?
1. Create separate 'stores' for each of the combo and set root correspondingly
2. Use Ext.Ajax.request to retrieve the JSON string
3. Use Ext.decode to parse the data and return a JavaScript object
4. Call combo.store.loadData(JSONObj) for each combo

So for the sequencing, #1 goes in configuration, #2 would be in Ext.onReady(), #3 should be in the Ext.Ajax.on(Complete), and #4 would be on ??

Here I'd like to leave the "loadData()" call to each individual combo when their triggers are clicked, in stead of a collective call from Ext.Ajax.on(). But not sure how I can achieve that. Could you advise?

Thank you very much,
leizz

[rbastic]

Thanks Condor.

So I will do the following?
1. Create separate 'stores' for each of the combo and set root correspondingly
2. Use Ext.Ajax.request to retrieve the JSON string
3. Use Ext.decode to parse the data and return a JavaScript object
4. Call combo.store.loadData(JSONObj) for each combo

So for the sequencing, #1 goes in configuration, #2 would be in Ext.onReady(), #3 should be in the Ext.Ajax.on(Complete), and #4 would be on ??

Here I'd like to leave the "loadData()" call to each individual combo when their triggers are clicked, in stead of a collective call from Ext.Ajax.on(). But not sure how I can achieve that. Could you advise?

Thank you very much,
leizz

#4 would be in your AJAX request handler, after you've decoded the response text.

[Condor]

You wanted to request all your combobox data in one request, so you can't wait until every combobox is activated separately.

I would do the Ext.Ajax.request when you show the form (and combobox loading goes in the request success handler).

[leizz]

I see. Thanks very much Condor and rbastic!

I'm about one and half weeks into Ext and am starting to feel the greatness of the framework and the people here on the forums :)

best regards,
leizz