Cascading comboboxes not working.

[KnowledgeSeeker]

I have a form with three comboboxes. I want to fill two of the comboboxes on selection of the first combobox. Here is the code for the comboboxes:

{
                        xtype: 'combobox',
                        fieldLabel: 'Department',
                        emptyText: 'Select Department',
                        allowBlank: false,
                        name: 'departmentId',
                        store: Ext.create('MyApp.store.Departments'),
                        displayField: 'departmentName',
                        valueField: 'departmentId',
                        flex: 1
                    }, {
                        xtype: 'combobox',
                        fieldLabel: 'Primary Function',
                        emptyText: 'Select Function',
                        allowBlank: false,
                        name: 'functionId',
                        displayField: 'functionName',
                        valueField: 'functionId',
                        flex: 1
                    }, {
                        xtype: 'combobox',
                        fieldLabel: 'Secondary Function',
                        emptyText: 'Select Function',
                        allowBlank: false,
                        name: 'secondaryFunctionId',
                        displayField: 'functionName',
                        valueField: 'functionId',
                        flex: 1
                    }

I have a listener for "Department" combobox for "change" event. This event is used to fill the other two comboboxes(Primary and Secondary Function) based on the department selected. Both these comboboxes will be populated with a same store. Here is the "change" event code:

 PopulateFunctions: function (combobox) {
            var me = this;
            var _departmentId = combobox.getValue();
            
            var ddlPrimaryFunction = combobox.up('form').down('combobox[name=functionId]');
            var ddlSecondaryFunction = combobox.up('form').down('combobox[name=secondaryFunctionId]');
            
            var functions = Ext.create('MyApp.store.Functions');
    
            Ext.Ajax.request({
                url: 'localhost/MyApp/api/functions/getfunctions',
                mode: 'POST',
                params: {
                    departmentId: _departmentId 
                },
                success: function (resp) {
                    var result = Ext.decode(resp.responseText);
                    functions.loadData(result);
                    ddlPrimaryFunction.bindStore(functions);
                    ddlSecondaryFunction.bindStore(functions);
                }
            });
        }

Store "MyApp.store.Functions" is defined as:

Ext.define('MyApp.store.Functions', {
    extend: 'Ext.data.Store',
    storeId: "functions ",
    model: 'MyApp.model.Functions'
});

The issue I am facing is that after selecting "Department" when I click on "Primary Functions" combobox, I can see the values the combobox is populated with but it keeps on showing "loading" mask. In the console there is an error "Cannot read property 'indexOf' of undefined". The "Secondary Function" combobox doesn't get populated at all. What can be the problem?

[Gary Schlosberg]

Have you tried using separate instances of the store for the second and third comboboxes?

[KnowledgeSeeker]

Thanks a lot Gary. Not sure about the reason but queryMode: 'local' did the trick

[AJAIN32]

For comboboxes, by default query mode is remote, which expects a url to get the data and fill the combobox.

but if you are populating the combobox with some other store,which is already loaded you have to define Query mode : local. then it won't look for a url for data.

Regards,
Ankit