1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    3
    fousheezy is on a distinguished road

      0  

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

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


    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

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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    3
    fousheezy is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You would have to override the onButtonRelease method of the segmented button to accomplish what you want to do.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    3
    fousheezy is on a distinguished road

      0  

    Default


    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:

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

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    That won't work when you do a production build. You need to extend the segmented button
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    3
    fousheezy is on a distinguished road

      0  

    Default


    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'
    Code:
    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.
    Code:
    requires: [..., 'EM.resources.SegmentedButton'],
    And so I can simply instantiate it by passing a config object into the items array of the view
    Code:
    ...
    {
        xtype: 'segmentedactionbutton',
        items: [{
                                xtype:'button',
                                text: 'Call Phone'
                            },
                            {
                                xtype:'button',
                                text: 'Send E-Mail'
                            }]
    }
    ...

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Very nice! 99% what I was thinking

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    ytkang is on a distinguished road

      0  

    Default There is a simple trick

    There is a simple trick


    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.