Javascriptextjs：仅选中两个复选框中的一个

问题描述

我正在使用的应用程序基于ExtJS，我想做的就是允许用户仅选中一个复选框。

问题是我的应用程序非常复杂，我对ExtJS的了解并不多。复选框在类viewport.js中初始化，如下所示：

Ext.define('Viewport',{
    extend : 'Ext.container.Viewport',require : ['A','B'],frame : true,layout : 'fit',items : [{
                xtype : 'container',layout : 'hBox',margins : "a b c d",items : [{
                    margins : "0 0 5 35",name : 'Box1',inputValue : true,xtype : 'checkBox',id : 'Box1-Box-id',BoxLabel : "Box 1"
                },{
                    margins : "0 0 5 35",name : 'Box2',id : 'Box2-Box-id',BoxLabel : "Box 2"
                }]
            }
})

我不知道如何修改此代码，以使用户仅选中这些复选框之一。我必须在此类中添加一个函数吗？

解决方法

执行此操作的方法有多种，实现此目的最直接，最明确的方法是将listeners添加到复选框：

在第一个复选框定义上，添加：

listeners: {
    change: function(checkbox,newValue) {
        if(newValue) { // if this checkbox is changed to "checked" state...
            checkbox.nextSibling().setValue(false); // uncheck next checkbox
        }
    }
}

在第二个复选框定义上，添加：

listeners: {
    change: function(checkbox,newValue) {
        if(newValue) { // if this checkbox is changed to "checked" state...
            checkbox.previousSibling().setValue(false); // uncheck previous checkbox
        }
    }
}

如果您只有多个复选框，那么这当然不能很好地扩展。但是，对于许多复选框而言，这通常还是糟糕的UX，您想从用户PoV重新考虑您的应用程序。