Q:

Graying out child dropdown - extjs

I have set up dependencies between 2 comboboxes. But the issue that I am having right now is whenever I refresh my page the 2nd combobox (child) shows all the values. What I would like to see is the 2nd should either be grayed or not show any values unless a value in the 1st combobox (parent) is selected. In my example below Roles is the parent combobox and tests is the child combobox. Values in tests combobox should appear only when a value in the Roles combobox is selected.
Ext.onReady(function() {
var roles=[
    ['Adm', 'Administrator'],
    ['Sci', 'Scientist'],
    ['Test', 'Tester']
];
Ext.define('Testfile.model.Role', {
        extend: 'Ext.data.Model',
        fields: ['abbr', 'role']
    });
var rolesStore = new Ext.data.Store({
    model: 'Testfile.model.Role',
    proxy: {
        type: 'memory',
        reader: {
            type: 'array'
        }
    },
    data: roles
});
var tests=[
    [1, 'Adm', 'Test1'],
    [2, 'Sci', 'Test3'],
    [3, 'Test', 'Test2'],
    [4, 'Adm', 'Test4']

];
Ext.define('Testfile.model.Test', {
        extend: 'Ext.data.Model',
        fields: ['id', 'abbr', 'test']
    });
var testsStore = new Ext.data.Store({
    model: 'Testfile.model.Test',
    proxy: {
        type: 'memory',
        reader: {
            type: 'array'
        }
    },
    data: tests
});
var form=Ext.create('Ext.form.Panel',{
    renderTo:document.body,
    bodyPadding: 10,
    width: 550,
    style:'margin:16px',
    height: 300,
    title:'Linked Combos',
    defaults: {xtype:'combo'},
    items: [{
        fieldLabel: 'Application Role',
        id:'firstComboID', 
        store:rolesStore,
        valueField: 'abbr',                     
        displayField: 'role',                           
        typeAhead: true,                                
        forceSelection: true,                                                                   
        allowBlank: false,
        editable: true,
        triggerAction: 'all',                           
        listeners: {
            select:{fn:function(combo, value) {
                var sample = Ext.getCmp('secondComboID');   
                    sample.store.clearFilter();
                    sample.store.filter('abbr', combo.getValue());                              
                    sample.clearValue();                                    
                }}                                
            }                                   
    },{                         
        fieldLabel: 'Select Test',
        id:'secondComboID',                                
        store:testsStore,
        valueField: 'id',
        displayField: 'test',
        typeAhead: true,
        forceSelection: true,
        allowBlank: false,
        editable: true,
        triggerAction:'all',
        lastQuery:''
    }]
});
Ext.getBody().add(me.form);

})
Can someone please suggest a fix to the script to include this functionality?

A:

Initially set 'disabled: true' for your second combo, then on the 'select' function of the first combo make it enabled - 'sample.setDisabled(false);'

