RadioButton is not checked when changed

i am working on creating a radiogroup containing two radios; I set a change listener on the radiogroup and everything seems to be working fine except that visually the radio buttons are not checked when clicked on, see below full code :

Ext.define('Mine.view.headerThemeButton', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.headerThemeButton',
    xtype: 'headerThemeButton',
    width: 50,
    height: 58,
    padding: 'auto 0 auto 0',
    bodyStyle: 'border-color: #FFFFFF !important;',
    //id : 'headerThemeButton',
    //height: 20,
    items: [{
        xtype: 'button',
        height: '100%',
         glyph: 'xf142@FontAwesome',
  
        cls: 'headerButtonsCls',
        listeners: {
            click: function(e, target) {
            
                var coords = e.getXY();
                var x = parseInt(coords[0]);
                var y = parseInt(coords[1]);

                 var finalY = y + 50;
                Ext.create('Ext.menu.Menu', {
                    items: [{
                        xtype: 'radiogroup',
                        columns: 1,
                        vertical: true,
                        items: [{
                            //xtype: 'radiofield',
                            boxLabel: 'Dark Mode',
                            name  : 'Mode',
                            //id : 'dmRB',
                            inputValue : 'dm'

                         }, {
                            //xtype: 'radiofield',
                            boxLabel: 'Standard Mode',
                            name  : 'Mode',
                            //id : 'smRB',
                            inputValue : 'sm'

                         }],
                        listeners : {

                             change : function(radio, newValue, oldValue){
                          
                                if (radio.getValue().Mode == 'dm'){

                                    radio.checked = true;
                                     this.onChangeThemeDark();
                                    }
                                else if (radio.getValue().Mode == 'sm'){
                                     radio.checked = true;
 
                                    this.onChangeThemeStandard();
                                    }
                            }
                        }
                    }]
                }).showAt(x, finalY);
            }

        }
    }]
});

I can't use id prop on each radio because that will raise a duplicate registration error. Any solution ?

Thanks !

EDIT : the whole button is included in a interface defined by :

Ext.define('Mine.view.newDashboard', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.newDashboard',

    controller: 'newDashboard',
    reference: 'dashboard',
    //overflowY: 'scroll',

    //autoScroll:true,
    layout: {
        type: 'border',
        align: 'stretch '
        //scrollable: true
    },
    /*viewConfig:
    {
        autoScroll: true
    },*/
    //height: 620,

    style: {
        'backgroundColor': '#909090 !important'
    },

    items: [{
            region: 'north',
            html: '',
            border: false,
            collapsible: false,
            margin: '0 0 0 0',
            resizable: false,
            //bodyStyle:'border-bottom-width: 0 !important;',
            layout: {
                type: 'hbox'

                // align: 'stretch'
            },
            items: [{
                    xtype: 'logolink',
                    padding: 'auto 0 auto 0'
                },
                {
                    xtype: 'tbfill'
                },
                {
                    xtype: 'headerThemeButton',
                    width: '100px'
                },...

I am not sure exactly what you are asking but I assume it is the problem that when the menu comes up after selecting a value nothing is selected. Also maybe that you can't get each button in the event.

Here is a fiddle that shows how to get each button in the event, two different ways.

Also each time you clicked the button you were creating a new menu so you were showing a new set of radio buttons each time the button was clicked. I am creating a menu on the button then showing it when clicked.

You could also create a menu and store it on the panel (or anywhere) and show that menu each time if you did not want it attached to the button.

Fiddle radio buttons