带有按钮的 Extjs 单选组答案

【问题标题】：Extjs radiogroup with buttons带有按钮的 Extjs 单选组
【发布时间】：2011-02-04 14:24:32
【问题描述】：

为了制作一个工具箱，我想知道如何用常规按钮制作一个单选组，而不是最新的单选按钮extJS

像这样使用 jQueryUI：http://jqueryui.com/demos/button/#radio

提前致谢，基卢斯

【问题讨论】：

标签： extjs

【解决方案1】：

我认为你应该考虑使用一组标准的 ExtJS 按钮。按钮可以分配给一个组，以便它们充当链接中显示的元素。

看这个例子：

{
    xtype: 'button',
    text: 'Choice 1',
    toggleGroup: 'mygroup'
}, {
    xtype: 'button',
    text: 'Choice 2',
    toggleGroup: 'mygroup'
}, {
    xtype: 'button',
    text: 'Choice 3',
    toggleGroup: 'mygroup'
}

按钮还有一个名为enableToggle 的属性，它允许它们切换，并且当您设置toggleGroup 时自动设置为true，并且toggleGroup 告诉ExtJS 它们是如何相关的。

注意，它们看起来像普通的 ExtJS 按钮，但行为却如你所愿。

【讨论】：

谢谢，这行得通。我现在如何获得选定的值？除了使用按钮的 eventHandler 和全局变量
如果您知道它们位于哪个容器中，您可以通过按钮查看按下了哪个按钮。如果您知道其中一个按钮，则可以找到父级并像以前一样进行操作。我不知道ButtonGroup 是否会给您带来任何好处。
@Chau 它就像一个魅力......除了小问题。仍然没有选择任何内容的能力，意味着取消选择按下的按钮:(..如果默认按下某些按钮，有什么办法可以避免这种情况？

【解决方案2】：

有一种不那么复杂（更好？）的方法来禁止取消选择按钮。将 allowDepress 配置选项设置为 false：

{
    xtype: 'radiogroup',
    layout: 'hbox',
    defaultType: 'button',
    defaults: {
        enableToggle: true,
        toggleGroup: 'mygroup',
        allowDepress: false,
        items: [
            { text: 'Choice 1'},
            { text: 'Choice 2'},
            { text: 'Choice 3'}
        ]
    }
}

【讨论】：

【解决方案3】：

只是为了回答@mastak 的评论（在上面的答案中），为了禁止取消选择按钮的操作，请将此侦听器添加到每个按钮：

listeners: {
   click: function(me, event) {
      // make sure a button cannot be de-selected
      me.toggle(true);
   }
}

这样，每次点击按钮都会重新选择它。

-DBG

【讨论】：

【解决方案4】：

只是添加到@deebugger 帖子。您还可以使用以下按钮属性来禁止取消选择

Ext.create('Ext.Button', {
    renderTo     : Ext.getBody(),
    text         : 'Click Me',
    enableToggle : true,
    allowDepress : false
});

【讨论】：