View Full Version : multi comboboxes share one store and change values dynamically

6 Oct 2013, 5:14 AM
Please help me.

There are three comboboxes in a form panel.
The server can send a JSON file as below only once.
(This example JSON is very simple but the real one will be huge.)

{"department": "New York", "section": "Sales", "person": "White"},
{"daprttment": "New York", "section": "Sales", "person": "Black"},
{"daprttment": "New York", "section": "Research", "person": "Red"},
{"daprttment": "New York", "section": "Research", "person": "Green"},
{"daprttment": "Los Angeles", "section": "Sales", "person": "Blue"},
{"daprttment": "Los Angeles", "section": "Sales", "person": "Yello"},
{"daprttment": "Los Angeles", "section": "Accounting", "person": "Orange"},
{"daprttment": "Los Angeles", "section": "Accounting", "person": "Purple"}

I must use this store for three comboboxes.

The first combobox uses first key and values.
The first combobox shows only "New York" and "Los Angeles" in this case.

When I select "New York" for example at the first combobox, the second combobox shows "Sales" and "Research".
And after selecting "Sales" at the second combobox, the third combobox shows "White" and "Black".

Could anyone solve this?

Thank you in advance for your help.

6 Oct 2013, 10:23 PM
One store (for 3rd combo) should hold all the data. Second - first and second columns (unique values). Third (for first combo) - only first column uniques. You will need to fill stores after request yourself.

8 Oct 2013, 6:20 AM
Thank you for a reply, ettavolt.

But, I'm sorry I cannot understand.
Could you show a sample, please?

10 Oct 2013, 12:25 AM
Just an idea, code is certainly non-functional:

var s1 = new Ext.data.Store({fields:['department'],proxy:'memory'}),
s2 = new Ext.data.Store({fields:['department', 'section'],proxy:'memory'}),
s3 = new Ext.data.Store({fields:['department', 'section', 'person'],proxy:'memory'}),
{"department": "New York", "section": "Sales", "person": "White"},
{"department": "New York", "section": "Sales", "person": "Black"},
{"department": "New York", "section": "Research", "person": "Red"},
{"department": "New York", "section": "Research", "person": "Green"},
{"department": "Los Angeles", "section": "Sales", "person": "Blue"},
{"department": "Los Angeles", "section": "Sales", "person": "Yello"},
{"department": "Los Angeles", "section": "Accounting", "person": "Orange"},
{"department": "Los Angeles", "section": "Accounting", "person": "Purple"}],

data.forEach(function(line) {
if (!uniques[line.department]) {
uniques[line.department] = {};
if (!uniques[line.department][line.section]) {
uniques[line.department][line.section] = 1;

13 Oct 2013, 6:48 AM
Thank you, ettavolt.

I think I understand your idea.
The problem is how to create code.

I must use Sencha Architect 2.

Can you provide the way?

14 Oct 2013, 2:18 AM
No, I don't use Architect. But this may go to a callback for ajax call, that will load the data.

14 Oct 2013, 4:07 AM

Thank you very much for your advise.:)
I'll try to create a project using your idea.