Segmented button with allowDepress set to false still sets buttons to pressed

[fousheezy]

I am creating a segmented button with 2 different contact options. I want the behavior to be that you can press either side to trigger the action without setting that button's class to be pressed. I thought the 'allowDepress' parameter would do this for me, however the segmented button still sets either button to 'pressed'. Is this a bug or is there a config option I'm not seeing which I must also include

                    {
                        xtype: 'segmentedbutton',
                        allowDepress:false,
                        items: [{
                            xtype:'button',
                            text: 'Call Phone'
                        },
                        {
                            xtype:'button',
                            text: 'Send E-Mail'
                        }]
                    }

[mitchellsimoens]

The allowDepress config, if set to true, will allow you to tap once on the button to have it pressed and tap again to have it depressed.

Are you wanting that when you tap on one button that it will automatically be depressed so you never have a button that is pressed?

[fousheezy]

Yes, exactly. To be clear, since depressed can mean 'pressed down' just like pressed, in Sencha depressed means 'not pressed', correct?

So my question is if there is a configuration for the segmented button which makes the sub elements remain not pressed even after you tap them

[mitchellsimoens]

You would have to override the onButtonRelease method of the segmented button to accomplish what you want to do.

[fousheezy]

Thank you. Why isn't the onButtonRelease method listed in any of the button or segmented button documentation? Does that hook in as a listener to the button element's release event?

For anybody who finds this thread via search, here's the solution:

                    {
                        xtype: 'segmentedbutton',
                        allowDepress:false,
                        onButtonRelease: function() {
                            return true;
                        }
                        items: [{
                            xtype:'button',
                            text: 'Call Phone'
                        },
                        {
                            xtype:'button',
                            text: 'Send E-Mail'
                        }]
                    }

[mitchellsimoens]

That won't work when you do a production build. You need to extend the segmented button

[fousheezy]

Thanks for the heads up! I still haven't built a Sencha App yet so that would have been frustrating to debug

So the solution is to extend the segmented button class into its own.
Please note that EM is the namespace for my app, and you should change any EM to your own app's namespace.

I've put the extended button class in 'app/resources/SegmentedButton.js'

Ext.define('EM.resources.SegmentedButton',{
    extend: 'Ext.SegmentedButton',
    xtype: 'segmentedactionbutton',
    config: {
        allowDepress:false,
        allowMultiple:false
    },
    onButtonRelease: function() {
        return true;
    }
});

And in the view file where I use it, I add it to the requires array.

requires: [..., 'EM.resources.SegmentedButton'],

And so I can simply instantiate it by passing a config object into the items array of the view

...
{
    xtype: 'segmentedactionbutton',
    items: [{
                            xtype:'button',
                            text: 'Call Phone'
                        },
                        {
                            xtype:'button',
                            text: 'Send E-Mail'
                        }]
}
...

[mitchellsimoens]

Very nice! 99% what I was thinking

Ext.define('Ux.SegmentedButton', {
    extend : 'Ext.SegmentedButton',
    xtype  : 'segmentedactionbutton',

    config : {
        allowPress : false
    },

    onButtonRelease : function (button) {
        if (this.getAllowPress()) {
            this.callParent([button]);
        }
    }
});

Buttons have a press state and an depressed state so we add an allowPress config.

[mitchellsimoens]

Oh and you don't need to specify xtype : 'button' on the items of a segmentedbutton, button is the defaultType so it will handle that for you.

[ytkang]

It is possible without making new class.

just add this,

listeners: {
toggle: function(container, button, pressed){
container.setPressedButtons(-1);
}
}
whenever button toggled, set button unpressed.