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属性通常会在多次使用时导致错误。

被修改 我尝试了答案，当我使用带有Ext.getCmp（）的id属性时，它们都能正常工作。我希望这可以使用reference或itemId ..

Answer 1

您可以使用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 2

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

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

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

希望这些信息能为您提供帮助。

Answer 4

使用 setVisible 功能隐藏和显示extjs组件

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

Answer 5

你试过使用lookupReference吗？

像这样：

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

然后：

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

如何动态隐藏radiofield extJS

5 个答案: