更改时不检查 RadioButton

Question

我正在创建一个包含两个收音机的无线电组；我在无线电组上设置了一个更改侦听器，一切似乎都工作正常，除了在视觉上单击时没有检查单选按钮，请参见下面的完整代码：

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

        }
    }]
});

我不能在每台收音机上使用 id prop，因为那样会引发重复注册错误。有什么解决办法吗？

谢谢！

编辑：整个按钮包含在定义的界面中：

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'
                },...

Answer 1

我不确定您到底在问什么，但我认为这是在选择一个值后出现菜单时没有选择任何内容的问题。也可能你无法在事件中获得每个按钮。

这里有一个 fiddle 展示了如何获取事件中的每个按钮，两种不同的方式。

此外，每次单击按钮时都会创建一个新菜单，因此每次单击按钮时都会显示一组新的单选按钮。我正在按钮上创建一个菜单，然后在单击时显示它。

您还可以创建一个菜单并将其存储在面板（或任何地方）上，如果您不想将它附加到按钮，则每次都显示该菜单。

Fiddle radio buttons

更改时不检查 RadioButton

RadioButton is not checked when changed

extjs

extjs5