depressed button

[BostonMerlin]

what is the recommend way to show a single button that a user can press where the button will stay depressed until user taps it again? I don't want the look of the toggle field and i will only ever have a single button. Thoughts?

Thanks
John

[mitchellsimoens]

I simply add or remove the pressedCls CSS class to the button.

[BostonMerlin]

in the tap event of the button i'm setting its pressed state like so but it's not changing. thoughts?

    button.setCls('x-button-pressing');

[mitchellsimoens]

button.addCls(buttun.getPressedCls());

[BostonMerlin]

no joy. if i set the buttons cls in its config (vs programmatically) it shows the button depressed as it expected. i'll keep playing around with it.

[mitchellsimoens]

It works. Here is a full example for you

new Ext.Container({
    fullscreen : true,
    items      : [
        {
            xtype   : 'button',
            text    : 'Test',
            pressed : false,
            handler : function(button) {
                var pressedCls = button.getPressedCls(),
                    isPressed  = button.pressed;

                button[isPressed ? 'removeCls' : 'addCls'](pressedCls);

                button.pressed = !button.pressed;
            }
        }
    ]
});

[markddavidoff]

The code above didn't work for me, but a neat and easy way to do it is to make one segmented button.\

new Ext.SegmentedButton({        
allowMultiple: false,
        items: [
                {
                     pressed : false,
                     text : 'Test'
                  }]
});

THIS works.