如何动态隐藏radiofield extJS

Question

我尝试使用以下代码 https://docs.sencha.com/extjs/6.0.0/classic/Ext.form.field.Radio.html

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

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() 一起使用时，它们都可以正常工作。我希望这可以与参考或 itemId 一起使用。

Answer 1

.hidden(true); 或 .hidden(false); 不是正确的方法。 您应该使用.setHidden(true); 隐藏组件并使用.setHidden(false); 显示组件。

例如：Ext.ComponentQuery.query('#radio3Id')[0].setHidden(true);

希望这些信息对您有所帮助。

Answer 2

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

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

Answer 3

您可以使用hide() 和show() 方法。

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

更复杂的例子，不使用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();
    }
});

Answer 4

没有任何方法被称为隐藏。 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

Answer 5

您是否尝试过使用 lookupReference ？

像这样：

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

然后：

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