Ext JS Dependent组合框

时间:2010-11-15 16:57:52

标签: extjs coldfusion cfquery

我是extJS的新手,并尝试实现以下功能:

我有两个选择下拉菜单,使用extJS进行转换。如何确保如果选择一个组合框中的值,则应将另一个值设置回某个默认值?

感谢。

编辑:代码至今:

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' 
}); 
});

我使用ColdFusion查询数据库并填充下拉菜单:

<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>

1 个答案:

答案 0 :(得分:3)

已编辑 - 我还没有使用CFM ......你需要弄清楚如何使用数据存储加载你的CF来使用这种技术。

您需要在组合中为select事件添加一个侦听器:

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}});
}

基本上你在这里做了以下几点:

  1. 获取在第一个组合中选择的值
  2. 获取对第二个组合的数据存储的引用
  3. 使用第一个组合中的选定值
  4. 重新加载第二个组合框的商店