Question

Looking to create a vertical button group that looks very similar to Twitters own button groups (example http://mobile-patterns.com/#/i/10)

I’ve tried changing Touch’s code to layout: 'vbox' but it completely tweaks the roundness of each button and leaves their corner roundness as what they would look like in a horizontal format.

Code below:

var segmentedButton = new Ext.SegmentedButton({
    allowMultiple: true,
    layout: 'vbox',
    items: [
        {
            text: 'Option 1'
        },
        {
            text   : 'Option 2',
            pressed: true
        },
        {
            text: 'Option 3'
        }
    ]
});
Ext.Viewport.add({ xtype: 'container', padding: 10, items: [segmentedButton] });

Do I need to add my own CSS styles in order to make it work? Or is there a built-in config?

I’m also wondering if it’s best to use a List instead of a SegmentedButton…

Thanks!

Answer 1

Thiem was right, I ended up using container to hold a group of buttons.

I was able to achieve the same effect by doing the following:

Javascript

{
    xtype: 'container',
    cls: 'btn-grouped ui-shadow ui-rd-soft ui-margin',
    items: [
        {
            xtype: 'button',
            docked: 'top',
            cls: 'btn btn-seg',
            text: 'Active relays'
        },
        {
            xtype: 'button',
            docked: 'top',
            cls: 'btn btn-seg',
            text: 'Relay history'
        },
        {
            xtype: 'button',
            docked: 'top',
            cls: 'btn btn-seg',
            text: 'About'
        }
    ]
}

CSS

/**
 *  Buttons
 */
.btn-grouped {}
.btn-grouped .btn {background:#FFFFFF;color:#303030; border-color:#DEDEDE; border-bottom-width: 1px;border-top-width: 0px; text-shadow:none;}
.btn-grouped .btn .x-button-label {background:url(../img/btn-arrow-right.png) 97% 15% no-repeat;}
.btn-grouped .btn-seg {-webkit-border-radius:0px;border-radius:0px;}
.btn-grouped .btn-seg:first-child {-webkit-border-radius: 7px 7px 0px 0px;border-radius: 7px 7px 0px 0px;}
.btn-grouped .btn-seg:last-child {-webkit-border-radius: 0px 0px 7px 7px;border-radius: 0px 0px 7px 7px;}

.btn {
padding: .6em 0;
font-size:110%;
display:block;
font-weight:bold;
}
.btn .x-button-label {text-align:left; padding-left:1em;}

/**
 *  Utilities
 */
.ui-shadow {
-webkit-box-shadow: 0px 0px 3px 1px #858585;
box-shadow: 0px 0px 3px 1px #858585;
}
.ui-rd-soft {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.ui-margin {
    margin:17px 0;
}

Result

Here is an image of the final result!