ExtJs Cascading-Combos Issue

Question

I Have an issue (maybe it will be my mistake using incorrectly ExtJs, I hope I do) using ExtJs to do a cascading-combos in a form. This is the situation:

1. I have 3 combos, Zones, Regions, Cities
2. When I click on one of them in order, the related one will be updated making an ajax request using Json as data format (so even if I think it's not useful, the sequence is the normal sequence Zones -> Regions -> Cities )
3. Even if it's not so important, I'm on an ASP.NET MVC Back-end

The Issue arise when I, as the first operation a I do, first click on a descendant and then on the parent, for instance, if I just open before Regions, and then opening Zones and selecting one I hope it will fill the Regions well.. but nothing happens. In this case too the ajax-request is done correctly and the resulting Json data is returned well as the same returned "if I respect the click order (Zones -> Regions)".

Let me say that if, when I enter in the page the first time and a I do a normal click order, everything going well, but when I change the click order, as I said before, things will not work never more.

The code we using to do that is:

var RegionsStore = new Ext.data.JsonStore({
                              url:'/mypath/blabla',
                              fields:['Value','Text']
                   });
Ext.onReady(function() {
    Ext.getCmp('ext-Area').on('select', function(sender, item) {
        var target = Ext.getCmp('ext-Regions');
        target.setDisabled(true);
        target.setValue('');
        target.store.removeAll();
        target.displayField = 'Text';
        target.valueField = 'Value';
        target.store = RegionsStore;
        target.store.reload({
               params: { 
                  data: 'regions', 
                  discriminator: 'area', 
                  value: sender.getValue()
               }
        });
        target.setDisabled(false);
    });
});

Thanks in advance for any suggestions!

Answer 1

Call combo-2.store.clearFilter(); in first combo selection handler to clear second combo internal filter before you updating it.

Answer 2

For others who may find this question, there is a tutorial on how to code linked combos here:

http://extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2