我正在尝试根据下拉选择中的选择来显示和隐藏 radio 组。因此,如果我选择东芝,则只会出现东芝型号,否则,如果我选择惠普,则只会出现惠普型号。现在该功能正在运行,但是在开始选择任何东西之前,两种型号(hp 和 toshiba)都在显示,但是我想要它以便只有 toshiba 型号在开始时显示。我尝试为 hp 模型提供 hidden:true 属性。但是当选择 hp 时,模型不再出现。关于如何在一开始只显示一个模型有什么想法吗?
toshibatypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'toshiba',
width:'100%',
items: [
{
checked: true,
boxLabel: 'Toshiba 1',
name: 'toshibas',
inputValue: 'toshiba1',
xtype:'radiofield'
},
{
boxLabel: 'Toshiba 2',
name: 'toshibas',
inputValue: 'toshiba2',
xtype:'radiofield'
}
]
});
hptypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'hp',
width:'100%',
items: [
{
checked: true,
boxLabel: 'HP 1',
name: 'hps',
inputValue: 'hp1',
xtype:'radiofield'
},
{
boxLabel: 'HP 2',
name: 'hps',
inputValue: 'hp2',
xtype:'radiofield'
}]
});
laptoptypes = Ext.create('Ext.form.ComboBox', {
store: laptops,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
editable:false,
width: 100,
listeners: {
select: function() {
var iComboValue = laptoptypes.getValue();
switch(iComboValue) {
case "toshibatypes" :
{
Ext.get("toshiba").show();
Ext.get("hp").hide();
break;
}
case "hptypes" :
{
Ext.get("hp").hide();
Ext.get("toshiba").show();
break;
}
}
}
}
});
最佳答案
如果您在 View 声明中配置隐藏,您可以使用 setHidden( boolean )
.
var iComboValue = laptoptypes.getValue();
Ext.get("toshiba").setHidden(iComboValue !== 'toshibatypes');
Ext.get("hp").setHidden(iComboValue !== 'hptypes');
关于javascript - 在 extjs 中显示隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32814588/