Extjs radiogroup with buttons

Question

For making a toolbox, I want to know how to make a radiogroup with regular buttons and not radiobuttons in latest extJS

Like this with jQueryUI: http://jqueryui.com/demos/button/#radio

Thanks in advance, Chielus

Answer 1

I think you should look at using a set standard ExtJS buttons. A button can be assigned to a group so that they act as the elements shown in your link.

See this example:

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

Buttons also have a property called enableToggle, that allows them to toggle, and is automatically set to true when you set a toggleGroup, and toggleGroup tells ExtJS how they are related.

Note, they look like regular ExtJS buttons, but behave like you want.

Answer 2

There is a less complicated (better?) way to disallow deselecting a button. Set the allowDepress config option to 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

Just to answer @mastak's comment (in the answer above), in order to disallow the action of de-selecting a button, add this listener to each button:

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

That way, each click on a button will re-select it.

-DBG