'Clear and refresh values in a linked combobox in ext js

i have created two linked combo boxes in ext js fetching data using json/ajax/php. When a value (car manufacturer) is selected in the first combo box, the second combo box updates itself with the models under that manufacturer e.g. selecting toyota in the first combo would update the second with values like avensis, corolla, premio, ist, etc.

First. The problem am having is when i select an item in the first combo e.g. 'toyota', then select for example 'avensis' in the second combo, then change to another manufacturer e.g Mercedes Benz. If Mercedes has models underneath it, e.g C200, E500, etc, they will show in the second combo, but the previously selected value 'avensis' still remains as selected in the first combo. How do I clear that value?

Second. If my returned json has no values, the second combo values do not change. How do I make the second combo empty if the returned json has null values? Here is a snippet of my code: 

xtype: 'combo',
                name: 'auto_make',
                id: 'auto_make',
                fieldLabel: 'Auto Make',
                store: auto_make_store,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'id',
                listeners: {
                    "select": function(obj){ 
                        var makeid = obj.getValue();// value of selected combo item

                        Ext.Ajax.request({
                            url: '../includes/dhx_dataview.php?action=15&mk='+ makeid +'&sc=' + subid + '&ac=' + cat,
                            success: function (response) {
                                var data = Ext.decode(response.responseText).models;
                                auto_model_store.loadData(data);
//Do I clear/ refresh second combo here? How?
                            }
                        });
                    }


                }

Thnx and rgds.

extjscombobox


Solution 1:[1]

you could try something like this - this will reload your combobox

{
 xtype: 'checkbox',
 //configs
 listeners : {
     checked : function (checkbox, checkedBool) {
     var yourCombo = Ext.getCmp(yourComboID);

     yourCombo.store.reload(
              {   
                 params: 
                     {yourParam : checkedBool},
                     {yourRowID : rowID}
                });
      }
  }

Solution 2:[2]

You might try adding forceSelection: true to your comboboxes. This will require that the selected value exists in the bound store.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rachel Gallen
Solution 2 sra

Related Questions