Question

I am new to extJS, and trying to implement the following functionality:

I have two select drop down menus, transformed using extJS. How can I make sure that if a value in one combo box is selected, the other value should be set back to some default value?

Thanks.

Edited: Code till now:

Ext.onReady(function(){ 

var converted = new Ext.form.ComboBox({ 

    typeAhead: true, 
    triggerAction: 'all', 
    transform:'id_Select1', 
    width:600, 
    forceSelection:true, 
    emptyText:'Select' 

}); 

var convertedCdr = new Ext.form.ComboBox({ 
    typeAhead: true, 
    triggerAction: 'all', 
    transform:'id_select2', 
    width:600, 
    forceSelection:true, 
    emptyText:'Select' 
}); 
});

I am using ColdFusion to query the database and populate the drop down menus:

<cfquery name="getData1" datasource="abc">
   SELECT * FROM table1
</cfquery>

<cfquery name="getData2" datasource="abc">
   SELECT * FROM table2
</cfquery>

<select name="select1" id="select1">
  <cfoutput query="getData1">
       <option value="#getData1.Id#">#getData1.name#</option>
  </cfoutput>
</select>

 <select name="select2" id="select1">
  <cfoutput query="getData2">
       <option value="#getData2.Id#">#getData2.name#</option>
  </cfoutput>
</select>

Answer 1

EDITED – I haven’t used CFM… you’ll need to figure out how to load your CF using data stores to use this technique.

You will need to add a listener for the select event on the combo:

xtype: 'combo',
id   : 'firstComboID',
listeners: {
  select: function(combo,  record,  index ) {
    var selVal = Ext.getCmp('firstComboID').getValue();
    var secondCombo = Ext.getCmp('secondComboID');
    secondCombo.store.reload({params: {yourParameterName: selVal}});
}

Basically you are doing the following here:

1. Get the value selected in the first combo
2. Get a reference to the second combo’s data store
3. Reload the store of the second combo box using the selected value from the first combo