1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    88
    Vote Rating
    0
    okwei is on a distinguished road

      0  

    Default Answered: Toggle Button Group - all buttons can be unpressed

    Answered: Toggle Button Group - all buttons can be unpressed


    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?


  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Answers
    653
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this works for you:

    Code:
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    88
    Vote Rating
    0
    okwei is on a distinguished road

      0  

    Default


    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.

    Quote Originally Posted by scottmartin View Post
    See if this works for you:

    Code:
    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.

  4. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    FYI: This solution does not check initial state of buttons yet.
    Code:
    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'
                }]
            }
        });
    });

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Answers
    653
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Sorry for the misunderstanding.

    Scott

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    82
    Vote Rating
    1
    RobertGary1 is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,660
    Answers
    433
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    82
    Vote Rating
    1
    RobertGary1 is on a distinguished road

      0  

    Default


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