How to dynamically hide radiofield extJS

Question

I tried using the code in https://docs.sencha.com/extjs/6.0.0/classic/Ext.form.field.Radio.html

to try making one of the radio fields hidden by adding some configs

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

and changed some code

//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);

but it does not work. How can I hide the radio field dynamically? I did not want to use Ext.getCmp() because I plan to remove the id properties of the radio field and using the id property usually causes errors when using it multiple times.

Edited I tried the answers and they all work fine when I use the id property with Ext.getCmp(). I would like this to work with either reference or itemId..

Answer 1

.hidden(true); or .hidden(false); is not the correct method. You should use .setHidden(true); to hide and .setHidden(false); to show the component.

Eg: Ext.ComponentQuery.query('#radio3Id')[0].setHidden(true);

Hope this info will help you.

Answer 2

Use setVisible function to hide and show the extjs components

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

Answer 3

You can use hide() and show() methods.

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

More complicated example, without using id and 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();
    }
});

Answer 4

There isn't any method called as hidden. setHidden() is the name of method which you can use. You have to pass Boolean value true/false as a parameter. Also hide() and show() will do the job.

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

Answer 5

have you tried with lookupReference ?

Like this :

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

And then :

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