时间戳

首页 > 解决方案 > 如何在单击时显示包含两个单独工作的单选按钮的标题菜单

extjs - 如何在单击时显示包含两个单独工作的单选按钮的标题菜单

问题描述

我在标题中创建了这个按钮，它通常显示一个包含两个垂直对齐的单选按钮的菜单。问题是菜单显示，但单选按钮不是独占的，即使我点击另一个按钮仍然检查。我的问题是如何在菜单中正确定义无线电组？

这是我的代码：

    Ext.define('Mine.view.headerThemeButton', {
        extend: 'Ext.panel.Panel',

        xtype: 'headerThemeButton',
        width: 50,
        height: 58,
        padding : 'auto 0 auto 0',
        bodyStyle: 'border-color: #FFFFFF !important;',
 
        items: [{
            xtype:'button',
            height: '100%',
            glyph: 'xf142@FontAwesome',
            cls :'headerButtonsCls',
            listeners: {
                click: function(e,target) {
                    var coords = e.getXY(),
                        x = parseInt(coords[0]),
                        y = parseInt(coords[1]),
                        finalY = y + 50;

                    Ext.create('Ext.menu.Menu',{
                        xtype: 'radiogroup',
                        columns: 1,
                        fieldLabel: 'Filmed In',
                        name: 'filmed_in',
                        items: [{
                            name: 'filmed_in',
                            boxLabel: 'Color',
                            inputValue: 'color'
                        },{
                            name: 'filmed_in',
                            boxLabel: 'Black & White',
                            inputValue: 'B&W'
                        }]
                    }).showAt(x, finalY);
                }
            }
        }]
    });

提前致谢

标签： extjsextjs5

解决方案

在 onClick 创建的菜单中，您将菜单的 xtype 设置为 radiogroup。但是您必须将 radiogroup 添加为项目。

Ext.create('Ext.menu.Menu', {
    // you missed this line
    items: [{
        xtype: 'radiogroup',
        items: [
            //radiofields
        ]
     }]
  }).showAt(x, finalY);

小提琴

推荐阅读