javascript - 在 extjs 中显示隐藏元素

Question

我正在尝试根据下拉选择中的选择来显示和隐藏 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;
            }

        } 
       }
       }
    });

Answer 1

如果您在 View 声明中配置隐藏，您可以使用 setHidden( boolean ) .

var iComboValue = laptoptypes.getValue();

Ext.get("toshiba").setHidden(iComboValue !== 'toshibatypes');
Ext.get("hp").setHidden(iComboValue !== 'hptypes');