Toggle Button Group - all buttons can be unpressed

[okwei]

I'd like to replicate a radio button group behavior - at least 1 button is selected, but it seems that all buttons in the toggle group can be unpressed.

any work around?

[scottmartin]

See if this works for you:

Ext.create('Ext.menu.Menu', {
    width: 100,
    margin: '0 0 10 0',
    floating: false,  // usually you want this set to True (default)
    renderTo: Ext.getBody(),  // usually rendered by it's containing component
    items: [{
        text: 'regular item 1',
        group: 'mygroup',
        checked: true
    },{
        text: 'regular item 2',
        group: 'mygroup',
        checked: false
    },{
        text: 'regular item 3',
        group: 'mygroup',
        checked: false
    }]
});

Scott.

[okwei]

Nope, this only render 3 buttons (with ext4.1.1), none of which can be selected/pressed. You can only click on them, just like regular buttons.

See if this works for you:

Ext.create('Ext.menu.Menu', {
    width: 100,
    margin: '0 0 10 0',
    floating: false,  // usually you want this set to True (default)
    renderTo: Ext.getBody(),  // usually rendered by it's containing component
    items: [{
        text: 'regular item 1',
        group: 'mygroup',
        checked: true
    },{
        text: 'regular item 2',
        group: 'mygroup',
        checked: false
    },{
        text: 'regular item 3',
        group: 'mygroup',
        checked: false
    }]
});

Scott.

[vietits]

FYI: This solution does not check initial state of buttons yet.

Ext.onReady(function(){
    Ext.define('GroupButton', {
        extend: 'Ext.button.Button',
        alias: 'widget.groupbutton',
        toggleGroup: 'defaultGroup',
        initComponent: function(){
            var me = this;
            me.callParent(arguments);
        },
        toggleHandler: function(button, state){
            var me = this;
            if(!(me.pressed || Ext.ButtonToggleManager.getPressed(me.toggleGroup))){
                me.toggle(true, true);
            }
        }
    });
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        width: 400,
        height: 300,
        tbar: {
            items: [{
                xtype: 'groupbutton',
                text: 'Button 1',
                pressed: true
            },{
                xtype: 'groupbutton',
                text: 'Button 2'
            },{
                xtype: 'groupbutton',
                text: 'Button 3'
            }]
        }
    });
});

[scottmartin]

Err, I misunderstood the requirement. Vietits should work fine.

Sorry for the misunderstanding.

Scott

[RobertGary1]

I just tried Vietits' solution and it worked great. No need to recreate a button group though, I was able to do it directly....

var newButton = Ext.widget('button', {
...
toggleHandler : function(button, state){ //prevent all unpressed. Sencha workaround.
var me = this;
if(!(me.pressed || Ext.ButtonToggleManager.getPressed(me.toggleGroup))){
me.toggle(true, true);
}


}


});

Of course the best solution would be for the Button object to have a parameter that prohibits toggle groups from having all buttons toggled.

[evant]

http://docs.sencha.com/ext-js/4-1/#!...g-allowDepress

[RobertGary1]

Ah. You're right. I've updated my solution to use that config option now.