0

I have 2 combos, I want to force to select the first combo (employer combo), after it's selected then the combo 2 (employee combo) is enable.

ExtJS 4.2.1

The code of the combos is:

{
    xtype: 'combobox',
    store: Ext.create('SoftHuman.store.catalog.Employer', {
        autoLoad: true
    }),
    displayField: 'Description',
    valueField: 'EmployerId',
    fieldLabel: 'Company',
    name: 'EmployerId',
    queryMode: 'local',
    allowBlank: true
}, {
    xtype: 'combobox',
    anchor: '100%',
    store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
    displayField: 'FullName',
    valueField: 'EmployeeId',
    queryMode: 'remote',
    fieldLabel: 'Employee',
    editable: true,
    hideTrigger: true,
    queryParam: 'searchStr',
    name: 'EmployeeId',
    allowBlank: true,

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

Right now my remote combo employee combo send into the query param "searchStr" that is the string typed in the combo. I need to pass also the selection from combo 1 (employer combo).

How can I achieve this? Thanks.

VAAA
  • 14,531
  • 28
  • 130
  • 253

1 Answers1

0

use something like this.

Ext.ComponentQuery.query('EmployerId').value

Ext.getCmp('EmployerId').value

var empValue = getComponent('EmployerId').value

if .value not work then try getValue() method.

Hope this helps.

in your second component(EmployeeId) add configuration disabled:true on load. then add afterrender listener to the first one. and then set the other combo available. Then do this............................................................................

{
    xtype: 'combobox',
    store: Ext.create('SoftHuman.store.catalog.Employer', {
        autoLoad: true
    }),
    displayField: 'Description',
    valueField: 'EmployerId',
    fieldLabel: 'Company',
    name: 'EmployerId',
    queryMode: 'local',
    allowBlank: true

    listeners: {                              <---------------------here
        select: function(combo, selection) {
            if (combo.getValue() != undefined) {
                 Ext.ComponentQuery.query('EmployeeId').setDisabled(false)
            } <----------------------------- to here
}, {
    xtype: 'combobox',
    anchor: '100%',
    store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
    displayField: 'FullName',
    valueField: 'EmployeeId',
    queryMode: 'remote',
    fieldLabel: 'Employee',
    editable: true,
    disabled:true, <------------add this
    hideTrigger: true,
    queryParam: 'searchStr',
    name: 'EmployeeId',
    allowBlank: true,

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

Hope this helps :)