时间戳

首页 > 解决方案 > 带有自动建议的 Extjs 级联组合框

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

问题描述

我有两个组合框，一个用于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（用于过滤/级联效果）以及我enter code here在 Employee ComboBox 中键入的值（用于自动建议）。

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

标签： javascriptcomboboxautocompleteextjs4.2

解决方案

只需在查询前处理程序中将CompanyId（如 extraParams）添加到companyEmployeeStore即可。

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

推荐阅读