Question

为了制作工具箱，我想知道如何在最新的extJS

中使用常规按钮而不是无线电按钮制作无线电组

与jQueryUI一样：http://jqueryui.com/demos/button/#radio

提前致谢， Chielus

Answer 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按钮，但表现得像你想要的那样。

Answer 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'}
        ]
    }
}

Answer 3

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

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

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

-dbg

Answer 4

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

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

Extjs radiogroup与按钮

4 个答案: