Javascript (extjs) : 只选中两个复选框中的一个

Question

我正在开发的应用程序是基于 ExtJS 的，我想做的是允许用户只检查一个复选框。

问题是我的应用程序非常复杂，而且我对 ExtJS 了解不多。复选框在 class 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',
                    inputValue : true,
                    xtype : 'checkbox',
                    id : 'box2-box-id',
                    boxLabel : "BOX 2"
                }]
            }
})

我不知道如何修改这段代码让用户只选中这些复选框之一。我是否必须在此 class 中添加功能？

Answer 1

有多种方法可以做到这一点，最直接明确的方法是在复选框中添加 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
        }
    }
}

当然，如果您的复选框不止几个，那么这种方法的扩展性就不太好。但是，对于多个复选框，这通常是糟糕的用户体验，您需要从用户 PoV 的角度重新考虑您的应用程序。

Javascript (extjs) : 只选中两个复选框中的一个

Javascript (extjs) : check only one checkbox from two

html

javascript

checkbox

extjs