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);” 谢谢!这就是我昨天发布这个问题后所做的,效果很好。无论如何,我会把你的答案记下来。