Search code examples
extjsextjs4extjs4.1extjs4.2extjs-mvc

ExtJS populate combobox from other combobox selected record


(ExtJS 4.2.1) I have two combobox for searching employee.

One search the employee by employee number and the other search the employee by name:

This is the store shared by both comboboxes:

var cboEmployeeStore = Ext.create('App.store.employee.EmployeeCombo');
cboEmployeeStore.getProxy().extraParams = {
    employerId: 0
};

These are my comboboxes:

xtype: 'combobox',
    itemId: 'cboEmployeeNumber',
    width: 180,
    store: cboEmployeeStore,
    cls: 'arigth',
    displayField: 'EmployeeNumber',
    valueField: 'EmployeeId',
    queryMode: 'remote',
    fieldLabel: 'Clave',
    editable: true,
    hideTrigger: true,
    queryParam: 'searchStr',
    name: 'EmployeeNumber',
    allowBlank: false,
    minChars: 3,
    listConfig: {
        loadingText: 'Searching...',
        minWidth: 300,
        // Custom rendering template for each item
        getInnerTpl: function () {
            return '<b>{EmployeeNumber}</b> / {FullName}';
        }
    }

xtype: 'combobox',
    itemId: 'cboEmployee',
    width: 400,
    store: cboEmployeeStore,
    cls: 'arigth',
    displayField: 'FullName',
    valueField: 'EmployeeId',
    queryMode: 'remote',
    fieldLabel: 'Employee',
    editable: true,
    hideTrigger: true,
    queryParam: 'searchStr',
    name: 'EmployeeId',
    allowBlank: false,

    listConfig: {
        loadingText: 'Searching...',
        // Custom rendering template for each item
        getInnerTpl: function () {
            return '<b>{EmployeeNumber}</b> / {FullName}';
        }
    }

Both uses the same store. The stores are remote so after you type the store will be filled by the results from server.

What I need is, if I search in the cboEmployeeNumber combobox and then select a value, then my cboEmployee should get the same record. And same if I do a search in the cboEmployee.

Any clue how to do that?


Solution

  • Listen to the select event on the combobox. When it's fired have it update the other combobox.

    Take care that the events don't get fired in a loop.