How to disable a component based on viewModel store returnrd data extjs

Question

I have two comboboxes and I want the combox(b) to be disabled based on the selected value from combobox A(I should look at its store data find the records and if the records parameter(arsubOpen) consists a value 1 then only I should enable the combobox B ). For this I have added a similar store like A and added a filter to filter the records which contain only arsubOpen 1. Now how do I make them enable them based on those store records.

Test fiddle

Answer 1

You can listen to change event and compare the new value with any value you want to enable the second combobox:

 {
    xtype: 'combobox',
    anchor: '100%',
    displayField: 'description',
    valueField: 'adjustmentTypeId',
    fieldLabel: 'A',
    // lastQuery: '' to disable store loading a second time on trigger click
    lastQuery: '',
    bind: {
        store: '{a}'
    },
    listeners: {
        change: function( combo, value ) {
            // Logging a value to console - remove this code
            console.log( value );

            var store = combo.getStore();
            var record = store.findRecord(combo.valueField, value)
            var arsubOpen = record.get('arsubOpen');
            // Condition for enabling here
            var shouldEnable = arsubOpen === 1;

            var form = combo.up( 'form' );
            var basicForm = form.getForm();
            // 'bField' si the name of the B combobox field
            var bCombo = basicForm.findField( 'bField' );
            bCombo.setDisabled( !shouldEnable );
        }
    }
},
{
    xtype: 'combobox',
    anchor: '100%',
    // Field name to use for form submitting and finding the field
    name: 'bField',
    displayField: 'description',
    valueField: 'arOnlySubCategoryId',
    fieldLabel: 'B',
    // lastQuery: '' to disable store loading a second time on trigger click
    lastQuery: '',
    bind: {
        disabled: 'disableB',
        store: '{B}'
    }
}

A fiddle based on your own.

I threw in lastQuery: '' configuration to disable the store loading a second time on the trigger click, which can be really annoying and took me a lot of hours to figure out a solution.