Make function to enable / disable combobox ExtJS

Question

I have the following components of a form in Ext JS, these two components are combobox and need that when the first combobox (type_sector) is selected, then enable the second combobox (main_sector).

{
                xtype: 'combobox',
                name: 'type_sector',
                fieldLabel: 'Setor',
                displayField: 'name',
                valueField: 'id',
                labelAlign: 'top',
                flex: 1,
                margin: { left: 3 },
                store: 'EconomicActivityType',
                width: 80,
                editable: false,
                queryMode: 'local',
            },
            {
                xtype: 'combobox',
                name: 'main_sector',
                fieldLabel: 'Principal',
                displayField: 'name',
                valueField: 'id',
                labelAlign: 'top',
                margin: { left: 3},
                store: 'EconomicActivityType',
                inputWidth: 200,
                editable: true,
                queryMode: 'local',
            }

I want to build a function that if combobox value (type_sector) equals x per example, enable combobox (main_sector), otherwise it is hidden / disabled. How can I do this inside a form in Ext JS?

I'm trying to do it this way:

{
                    xtype: 'combobox',
                    name: 'type_sector',
                    fieldLabel: 'Setor',
                    displayField: 'name',
                    valueField: 'id',
                    labelAlign: 'top',
                    flex: 1,
                    margin: { left: 3 },
                    store: 'EconomicActivityType',
                    width: 80,
                    editable: false,
                    queryMode: 'local',
                    id: "type_sector_combo",
                    listeners:{select:{fn:function() {
                                if (this.getComponent('type_sector_combo').value == "sector"){
                                    this.getComponent('main_sector_combo').disable = false;
                                }
                            }}}
                },
                {
                    xtype: 'combobox',
                    name: 'main_sector',
                    fieldLabel: 'Principal',
                    displayField: 'name',
                    valueField: 'id',
                    labelAlign: 'top',
                    margin: { left: 3},
                    store: 'EconomicActivityType',
                    inputWidth: 120,
                    editable: true,
                    queryMode: 'local',
                    id: "main_sector_combo",
                    disabled: true
                }

Answer 1

Create listener on type_sector combo for select event https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.ComboBox.html#event-select then inside it use setDisabled method https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.ComboBox.html#placeholder-setDisabled to set state for main_sector combo