在extjs中显示隐藏元素

时间:2015-09-28 01:27:01

标签: javascript extjs

我正在尝试显示和隐藏放射性组,基于从播种选择中选择。因此,如果我选择toshiba只显示toshiba模型,否则如果我选择hp只显示hp模型。现在功能正在运行,但是在开始选择任何东西之前,两个模型(hp和toshiba)都在显示,但是我想要它以便只在开始时显示toshiba模型。我尝试给hp模型,属性隐藏: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;
            }

        } 
       }
       }
    });

1 个答案:

答案 0 :(得分:2)

如果在视图声明中配置hidden,则可以使用setHidden( boolean )

var iComboValue = laptoptypes.getValue();

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