0

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>
James A Mohler
  • 11,060
  • 15
  • 46
  • 72
DG3
  • 5,070
  • 17
  • 49
  • 61

1 Answers1

3

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
It Grunt
  • 3,300
  • 3
  • 21
  • 35
  • Here is the code I have 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 have two select drop downs populated from database: Not sure if combo.store would work in my case? – DG3 Nov 15 '10 at 18:39
  • Can you edit your question with your source code using the code formatting in the WYSIWYG editor please? Where do you your combo boxes get their data from then? I don't see any configuration options. – It Grunt Nov 15 '10 at 18:58
  • I need to see how you are loading the data... When you use **transform** in the configuration, the DOM elements are converted to an ArrayStore automatically. Can you edit your question to show the layout and how the data is loaded? – It Grunt Nov 15 '10 at 19:54
  • I updated my question with html code too. I hvae another question. In javascript, I use document.all.select1.value to get the value of an element. What is the equivalent in extJS? – DG3 Nov 15 '10 at 20:03
  • Ext.getCmp('fieldDomID').value – It Grunt Nov 15 '10 at 20:14
  • I don't suppose you're using Spring MVC also are you? I'm a bit unsure of how to do the conversions between ColdFusion and ExtJS... All my experience has been using Java, JSP, or PHP calls – It Grunt Nov 15 '10 at 20:16
  • No, I am not using Spring MVC. Can you direct me to good extJS tutorials for beginners, explaining basic stuff like getting and setting element values, manipulating form elements etc? – DG3 Nov 15 '10 at 20:32
  • Please accept my answer while you're at it. I feel my help has been sufficient to get the bump in reputation... – It Grunt Nov 15 '10 at 20:39