当选择radio字段显示特定面板时，如何在Extjs中为radio group编写单个侦听器？

请尽量这样做，这可能对你有用

var radioGroup = {
        xtype: 'radiogroup',
        vertical: 'true',
        columns: 1,
        width: 200,
        items: [{
                    boxLabel: 'Select Predefined interval',
                    name: 'timeInterval',
                    id: 'selectPredefinedInterval',
                    inputValue: 'predefined',
                    listeners: {
                        change: function(rf, newValue, oldValue) {
                            if (newValue) {
                                Ext.getCmp('predefinedDatePanel').show();
                            } else {
                                Ext.getCmp('predefinedDatePanel').hide();
                            }
                        }
                    }

                },
                {
                    boxLabel: 'Specify last X hours/days',
                    name: 'timeInterval',
                    id: 'SpecifyLastHours',
                    inputValue: 'lasthours',
                    listeners: {
                        change: function(rf, newValue, oldValue) {
                            if (newValue) {
                                Ext.getCmp('lastXDatePanel').show();
                            } else {
                                Ext.getCmp('lastXDatePanel').hide();
                            }
                        }
                    }


                },
                {
                    boxLabel: 'Specify date or interval',
                    name: 'timeInterval',
                    id: 'specifiedDate',
                    inputValue: 'specifydate',
                    listeners: {
                        change: function(rf, newValue, oldValue) {
                            if (newValue) {
                                Ext.getCmp('specifyDatePanel').show();
                            } else {

                                Ext.getCmp('specifyDatePanel').hide();
                            }
                        }
                    }



                },

实际上，&&newValue不是必需的。。。 谢谢..:

在ExtJs文档组中有更改事件。你可以参考

我已经创建了一个小演示，以显示您根据您的要求，它是如何工作的

---

请正确地格式化你的代码。现在，我为每个无线电领域都设置了一个监听器，而不是如何使用单个的listeners@user6454237请先进行代码格式化。您的代码不可读。@user6454237您是指您重复的更改函数吗？是的更改函数@uuid不适用于我如果值为true，它不会调用所提到的panelEx:iftrue{Ext.getCmp'predefinedDatePanel.show；}应该调用此面板，但它将转到下一个if语句，而不是调用该语句panel@user6454237现在检查更新的代码..我写了错误的getValue拼写。。

var radioGroup = {
        xtype: 'radiogroup',
        vertical: 'true',
        columns: 1,
        width: 200,
        items: [{
                boxLabel: 'Select Predefined interval',
                name: 'timeInterval',
                id: 'selectPredefinedInterval',
                inputValue: 'predefined'
            },
            {
                boxLabel: 'Specify last X hours/days',
                name: 'timeInterval',
                id: 'SpecifyLastHours',
                inputValue: 'lasthours',
            },
            {
                boxLabel: 'Specify date or interval',
                name: 'timeInterval',
                id: 'specifiedDate',
                inputValue: 'specifydate'
            }
        ],
        listeners: {
            change: function(radio, newValue, oldValue) {

                Ext.getCmp('predefinedDatePanel').hide();
                Ext.getCmp('lastXDatePanel').hide();
                Ext.getCmp('specifyDatePanel').hide();

                if (radio.getValue().timeInterval == 'predefined' && newValue) {
                    Ext.getCmp('predefinedDatePanel').show();
                } else if (radio.getValue().timeInterval == 'lasthours' && newValue) {
                    Ext.getCmp('lastXDatePanel').show();
                } else if (radio.getValue().timeInterval == 'specifydate' && newValue) {
                    Ext.getCmp('specifyDatePanel').show();
                }
            }
        }

    },

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    width: '100%',
    height: 500,
    itemId: 'myPanel',
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    dockedItems: [{
        xtype: 'toolbar',
        defaults: {
            hidden: true
        },
        items: [{
            html: 'predefinedDatePanel',
            itemId: 'predefined'
        }, {
            html: 'lastXDatePanel',
            itemId: 'lasthours'
        }, {
            html: 'specifyDatePanel',
            itemId: 'specifydate'
        }]
    }],
    items: [, {
        xtype: 'radiogroup',
        vertical: 'true',
        columns: 1,
        width: 200,
        listeners: {
            change: function (rf, newValue, oldValue) {
                var myPanel = rf.up('#myPanel');
                myPanel.down('toolbar').items.items.map(item => {
                    item.hide();
                })
                myPanel.down(`#${newValue.timeInterval}`).show();
            }
        },
        items: [{
            boxLabel: 'Select Predefined interval',
            name: 'timeInterval',
            id: 'selectPredefinedInterval',
            inputValue: 'predefined'

        }, {
            boxLabel: 'Specify last X hours/days',
            name: 'timeInterval',
            id: 'SpecifyLastHours',
            inputValue: 'lasthours'

        }, {
            boxLabel: 'Specify date or interval',
            name: 'timeInterval',
            id: 'specifiedDate',
            inputValue: 'specifydate'
        }]
    }]
});