在extjs中显示隐藏元素

Question

I'm trying to show and hide radiogroups, based on selection from a drop-sown selection. So that if i choose toshiba only the toshiba models appear, else if i choose hp only the hp models appear. Now the functionality is working, however at the beginning before selecting anything, both models (hp and toshiba) are showing, however i want it so that only the toshiba models are showing at the beginning. I tried giving the hp models, the property hidden:true..But when selecting hp, the models no longer appear. Any idea on how to display only one model at the beginning?

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

If you configure hidden on the view declaration you can use setHidden( boolean ) .

var iComboValue = laptoptypes.getValue();

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