Results 1 to 4 of 4

Thread: Cascading comboboxes not working.

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    37
    Answers
    1

    Default Cascading comboboxes not working.

    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:

    Code:
    {
                            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:

    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:

    Code:
    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?

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

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

  3. #3
    Sencha User
    Join Date
    Oct 2013
    Posts
    37
    Answers
    1

    Default

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

  4. #4
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •