让孩子掉线 - extjs

时间:2013-11-18 20:20:43

标签: javascript extjs combobox

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

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

})

有人可以建议修改脚本以包含此功能吗?

1 个答案:

答案 0 :(得分:1)

最初为你的第二个组合设置'disabled:true',然后在第一个组合的'select'功能上启用它 - 'sample.setDisabled(false);'