Javascript 灰显子下拉列表-extjs

Javascript 灰显子下拉列表-extjs,javascript,extjs,combobox,Javascript,Extjs,Combobox,我在两个组合框之间设置了依赖项。但我现在遇到的问题是,每当我刷新页面时,第二个组合框(子)会显示所有值。我想看到的是,第二个组合框应该是灰色的,或者不显示任何值,除非在第一个组合框(父)中选择了一个值。在我下面的示例中,角色是父组合框,测试是子组合框。只有在选择了“角色”组合框中的值时,“测试”组合框中的值才会出现 Ext.onReady(function() { var roles=[ ['Adm', 'Administrator'], ['Sci', 'Scientist']

我在两个组合框之间设置了依赖项。但我现在遇到的问题是,每当我刷新页面时,第二个组合框(子)会显示所有值。我想看到的是,第二个组合框应该是灰色的,或者不显示任何值,除非在第一个组合框(父)中选择了一个值。在我下面的示例中,角色是父组合框,测试是子组合框。只有在选择了“角色”组合框中的值时,“测试”组合框中的值才会出现

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);
})


有人可以建议对脚本进行修复以包含此功能吗?

首先为第二个组合设置“disabled:true”,然后在第一个组合的“select”功能上启用-“sample.setDisabled(false);”

谢谢!这就是我昨天发布这个问题后所做的,效果很好。无论如何,我会把你的答案记下来。