带有自动建议的 Extjs 级联组合框

Question

我有两个组合框，一个用于 Company，另一个用于 Employees。我想让 Employee ComboBox 依赖于公司 ID，即应该根据 Employee ComboBox 中的选定值进行填充。另外，我想在 Employee ComboBox 中启用自动建议。下面是我写的代码：

{
  xtype:'combo',
  multiSelect : false,
  store :companyStore,
  afterLabelTextTpl:'<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>',
  editable:true,
  forceSelection:true,
  id:'companyCombo',
  fieldLabel:'Company Name',
  displayField : 'CompanyName',
  valueField : 'CompanyId',
  submitEmptyText :'false' ,
  width:350,
  mode: 'remote',
  queryParam: 'query',
  hideTrigger: true,   
  selectOnFocus:true,
  typeAhead : true
},
{
  xtype:'combo',
  multiSelect : false,
  store : companyEmployeeStore,
  afterLabelTextTpl:'<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>',
  editable:true,
  forceSelection:true,
  id:'companyEmployeeCombo',
  fieldLabel:'Employee Name',
  displayField : 'EmployeeName',
  valueField : 'EmployeeId',
  submitEmptyText :'false' ,
  width:350,
  mode: 'remote',
  queryParam: 'query',
  hideTrigger: true,   
  selectOnFocus:true,
  typeAhead : true
}


var companyStore = Ext.create('Ext.data.Store', {
    fields : ['CompanyId','CompanyName'],
    proxy : {
        url : 'getListOfCompanies',
        type : 'ajax'
    }
});

var companyEmployeeStore = Ext.create('Ext.data.Store', {
    fields : ['EmployeeId','EmployeeName'],
    proxy : {
        url : 'getListOfEmployeesForCompany',
        type : 'ajax'
    }
});

据我所知，这一行

queryParam: 'query',

会将字段的值传递到我的后端。但根据我的要求，我需要 Company ComboBox 中的 CompanyId（用于过滤/级联效果）以及我在 Employee ComboBox 中输入的值 enter code here（用于自动建议） .

我怎样才能达到同样的效果？提前致谢

Answer 1

只需将 CompanyId 添加到 beforequery 处理程序中的 companyEmployeeStore 之类的 extraParams。

Ext.getCmp('companyEmployeeCombo').on({
  beforequery: function (queryPlan) {
    Ext.apply(queryPlan.combo.store.getProxy().extraParams, {
        CompanyId: EmployeeId /*bind your value*/
    });
  }
})

带有自动建议的 Extjs 级联组合框

Extjs Cascaded combobox with autosuggestion

javascript

combobox

autocomplete

extjs4.2