how to write single listener in Extjs for radio group when radio field is selcted to dispaly particular panel?

Question

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



                },

Answer 1

In ExtJs docs RadioGroup have change event. You can refer ExtJs docs

I have create small demo to show you as per your requirement, how it work. Sencha fiddle example

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'
        }]
    }]
});

Answer 2

Please try to do like this, it might be work for you..

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

    },

Actually, "&& newValue" is not required... thanks..:)