如何解决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重新考虑您的应用程序。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。