5

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

4 Answers 4

8

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.

3
  • Thanks, this works. How can i get the selected value now? Besides doing it with an eventHandler for the buttons and a global variable
    – Chielus
    Feb 14, 2011 at 8:22
  • If you know which container they resides in, you can go through the buttons and see which one is pressed. If you know one of the buttons, you can find the parent and do like before. I don't know if a ButtonGroup will give you any advantages.
    – Chau
    Feb 15, 2011 at 7:48
  • 1
    @Chau It works like a charm.. except small issue. There is still ability to choice nothing, means deselect pressed button :(.. Is there any way to avoid such things if some button pressed by default ?
    – mastak
    Aug 23, 2011 at 11:36
4

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

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

0

Just adding to the @deebugger post. You can also use the following button property to not allow to deselect a selection

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.