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

【问题标题】：Extjs Cascaded combobox with autosuggestion带有自动建议的 Extjs 级联组合框
【发布时间】：2019-09-23 20:05:41
【问题描述】：

我有两个组合框，一个用于Company，另一个用于Employees。我想让员工组合框依赖于公司 ID，即应该根据员工组合框中的选定值填充。另外，我想在 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（用于自动建议）。

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

【问题讨论】：

标签： javascript combobox autocomplete extjs4.2

【解决方案1】：

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

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

【讨论】：