Javascript 如何动态隐藏radiofieldextjs

我试着在中使用代码

尝试通过添加一些配置来隐藏其中一个无线电字段

boxLabel: 'XL',
name: 'size',
inputValue: 'xl',
id: 'radio3',
itemid: 'radio3Id'

并更改了一些代码

//if XL is selected, change to L
if (radio3.getValue()) {
    radio2.setValue(true);
    return;
    Ext.ComponentQuery.query('#rad3').hidden(true);
}

//if nothing is set, set size to S
radio1.setValue(true);
Ext.ComponentQuery.query('#radio3Id').hidden(false);

但它不起作用。如何动态隐藏无线电场？ 我不想使用Ext.getCmp（），因为我计划删除无线字段的id属性，并且多次使用id属性通常会导致错误

编辑 我尝试了这些答案，当我将id属性与Ext.getCmp（）一起使用时，它们都可以正常工作。我希望它可以与reference或itemId一起使用。

.hidden（true）或
隐藏（假）不是正确的方法。
您应该使用
.setHidden（true）
隐藏和
.setHidden（false）以显示组件

例如：
Ext.ComponentQuery.query（'#radio3Id'）[0].setHidden（true）

希望这些信息能对您有所帮助。
您可以使用和方法

更复杂的示例，不使用
id
和
itemId
：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.define('Test.TestWindow', {
            extend: 'Ext.window.Window',
            closeAction: 'destroy',
            width: 400,
            height: 400,

            initComponent: function() {
                var me = this;
                me.callParent(arguments);

                me.radioM = Ext.create('Ext.form.field.Radio', {
                    boxLabel  : 'M',
                    name      : 'size',
                    inputValue: 'm',
                    width: 50
                });
                me.radioL = Ext.create('Ext.form.field.Radio', {
                    boxLabel  : 'L',
                    name      : 'size',
                    inputValue: 'l',
                    width: 50
                });
                me.radioXL = Ext.create('Ext.form.field.Radio', {
                    boxLabel  : 'XL',
                    name      : 'size',
                    inputValue: 'xl',
                    width: 50,
                    listeners: {
                        change: function(e) {
                            var me = e.up('window');

                            /**
                            Do what you want with:
                            * me.radioM
                            * me.radioL
                            * me.radioXL
                            */
                            me.radioL.hide();
                        }
                    }
                });

                me.container = Ext.create('Ext.form.FieldContainer', {
                    fieldLabel : 'Size',
                    defaultType: 'radiofield',
                    defaults: {
                        flex: 1
                    },
                    layout: 'hbox',
                    items: [
                        me.radioM,
                        me.radioL,
                        me.radioXL
                    ]
                });

                me.add(me.container);

            }


        });

        var win = new Test.TestWindow({

        });
        win.show();
    }
});

使用setVisible函数隐藏和显示extjs组件

Ext.ComponentQuery.query('#radio3Id').setVisible(true); //to show
Ext.ComponentQuery.query('#radio3Id').setVisible(false); //to hide

没有任何方法被称为隐藏。setHidden（）是可以使用的方法的名称。必须将布尔值true/false作为参数传递。同时，hide（）和show（）也将完成此任务

Ext.ComponentQuery.query('#radio3Id')[0].setHidden(false);//to show
Ext.ComponentQuery.query('#radio3Id')[0].setHidden(true);//to hide

Ext.ComponentQuery.query('#radio3Id')[0].show();//to show
Ext.ComponentQuery.query('#radio3Id')[0].hide();//to hide

你试过使用lookupReference吗

像这样：

{
 boxLabel: 'XL',
 name: 'size',
 inputValue: 'xl',
 id: 'radio3',
 itemid: 'radio3Id',
 **reference: 'radio3Id'**
}

然后：

this.lookupReference('radio3Id').setHidden(true);

我尝试使用setHidden和hide，它可以与Ext.getCmp（）一起使用，但不能与Ext.ComponentQuery一起使用。query（）Ext.ComponentQuery将返回一个对象数组。编辑了答案。现在试试。我试过使用setVisible，它可以使用Ext.getCmp（），但不能使用Ext.ComponentQuery.query（）。我想在其他答案中使用itemId或reference而不是IDName。它适用于Ext.getCmp（），但在我使用itemiddle时不适用。请分享您的代码/fiddle（），其中您对itemiddle有疑问。我为没有清楚地查看您的示例而道歉。当[0]包含在Ext.ComponentQuery.query中时，它似乎实际起作用。其他答案如此相似，以至于我错过了。Thanks@Jb45更新的示例。感谢使用不同的方法，但我正在标记另一种方法，因为它使用itemIdor，可能与Ext.ComponentQuery.query（'itemid=“radio3Id”）。setHidden（true）
this.lookupReference('radio3Id').setHidden(true);