How to dynamically hide radiofield extJS

How to dynamically hide radiofield extJS

radiofield sencha
extjs radiofield listeners
extjs padding
extjs container example
extjs validator example
extjs tree grid
extjs floating panel
extjs combobox example

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..


.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.

hide/unhide fields dynamically, Hi, I wanna have the possibility to hide/unhide fields from my form dynamically. Then, i would like to change the display property of other fields  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.


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

Ext.form.RadioGroup, The radio field is an enhanced version of the native browser radio controls and is a good way of If the content element is hidden, we will automatically show it. Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.


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();
    }
});

Ext.field.Radio, Ext JS 4.2.4 API Documentation from Sencha. Class documentation, Guides and Videos on how to create Javascript applications with Ext JS 4. How to Show/Hide/Toggle Element with ExtJS? How to hide tab in ExtJS 4. 0. hiding/showing trigger dynamically for a combobox in extjs. 1.


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

Ext.form.RadioGroup - Ext JS 4.2.4, The CSS class to use when the radio field receives focus. Defaults to: Set to true to completely hide the label element (fieldLabel and labelSeparator). Set to  How to hide/show date component on button click event in extjs ? I tried it with hide() and show() method, but it doesn't work for displayField of my date componenet Same thing happend when I tried with setvisible().


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

Ext.form.field.Radio - Ext JS 4.2.0, how we can hide the combo box when we click on radio button on the form in event for the radiofield..http://docs.sencha.com/extjs/5.1/5.1o-event-change In How to set dynamic inputValue and boxlabel for radio button in radio group in  Ext.grid.column.Column#renderer: Allows the underlying store value to be transformed before being displayed in the grid State saving When the owning Ext.grid.Panel is configured Ext.grid.Panel#cfg-stateful , it will save its column state (order and width) encapsulated within the default Panel state of changed width and height and collapsed/expanded state.


radio group, Ext JS Classic - API documentation from Sencha. By default the shadow is hidden while the component is animating specified with string names so that the scope can be dynamically resolved. When set to true the value of this group of radiofield components will be mapped to the inputValue of the checked item. ExtJs 4 Radio Button Example How to create a Radio Buttons inside RadioGroup in ExtJs and query the current selection In this example we have created a bunch of Radio buttons with the same name so that only one is selected at a time and then wrap them inside a RadioGroup container.


Ext.form.RadioGroup, The main value of a Radio field is a boolean, indicating whether or not the Set to true to completely hide the label element (fieldLabel and labelSeparator). The following controller code shows how I dynamically render radio buttons in a Sencha Touch controller. Just scroll down and look for the recordedStreamsStore.each block of code:


Ext.form.field.Radio, Set a dynamic default value in your Checkbox or Radio Button field. Some checkbox and radio field-specific styling is available in 'Formidable' If you would like to hide your Checkbox or Radio Button option labels, see the  This time we created 3 Panels - the first one is created just as before but the inner two are declared inline using an xtype. Xtype is a convenient way of creating Components without having to go through the process of using Ext.create and specifying the full class name, instead you can just provide the xtype for the class inside an object and the framework will create the components for you.