View Full Version : Multiple dependent ComboBoxes to be filled on event

21 Sep 2009, 5:06 AM

let's see how you deal with this interesting problem concerning dependent ComboBoxes:

I have made a little dialog (see attachment, you need to unzip the JPG from the ZIP to see the image full-size). The dialog works, but I'd like to reduce the number of HTTP requests made to the server as it might annoy users with high network latency.

The dialog is very similar to the one used for setting mail filter settings in common e-mail clients (like say Thunderbird). In my dialog, there are a number of dependent ComboBox objects on the right. After selecting an "Event Source", the select listener of that combo is triggered, which loads the store of the second ComboBox labelled "Attribute" with the value of the "Event Source" combo as a parameter.

The same applies to the third ComboBox: After the user has selected an "Attribute" in the second ComboBox, that second Combo's select listener is triggered and it loads the Store of the third Combobox "Operator", the value of the second being a load parameter. (Ignore the "Value" ComboBox for now).

As soon as a user has completely filled the settings in one line, the button "Add criterion..." can be clicked, adding another line. Again, the user may click through "Event Source", "Attribute", and "Operator", each causing the next one's store to load.

That's the way filter settings are created. Let's now assume the filter settings have been made and saved. The user comes back the next day to see the settings made for e.g. the group called "eins" as can be seen on the left in the screenshot. The user should now get to see the filter settings for "eins".

When I implemented the dialog I thought the best to make this work (and at least it does work) might be to just imitate the user clicking through the Combos left-to-right by calling
a) setValue on 1st combo
b) determining selected record and selected index in 1st combo
c) calling onSelect on first combo with the selected record/index, causing the select listener of the second combo to fire. And so on.

In detail:

1) User clicks on group in Grid on left
2) ExtJS sends request, asking server for the Filter Criteria settings of selected group
3) ExtJS gets response (JSON) containing the Filter Criteria for the selected group. That JSON looks like this:

4) For every object in the JSON response's array, a method is called that creates the four ComboBoxes within one line. This means that it creates one JsonStore per ComboBox! After creating each combobox and attaching the corresponding select listeners to them it sets the first ComboBox's value and then calls its onSelect method with the selected record (see description above JSON code). BTW: The number of filter settings lines is completely variable, can be one, can be 20.

Ok, it works, BUT:
For each automatically filled ComboBox, a request is made to the server. The number of lines in the "Filter Criteria" FieldSet is not fixed, and the ComboBoxes are created at runtime. Thus, I don't know how to change this. I thought about creating just _THREE_ JsonStores, one for _ALL_ "Event Source" Combos, one for _ALL_ attribute ComboBoxes, and one for _ALL_ "Operator" Combos.

But if I do that and use the JsonStore's filter method for e.g. the "Operator" Combo in the third line (see screenshot) after setting "Attribute" to "Rule Description", the two "Attribute" ComboBoxes in line 1 and 2 are also filtered to that value.

I don't know IF i can get around this problem at all. I'd be glad if someone with a clue came and told me that this either does not work at all or if s/he could point me in the right direction.

Thanks a lot

23 Sep 2009, 12:53 AM
Please share your thoughs on this topic. I've tried to make this easier by highlighting the relevant paragraph in bold font. Thanks.