Sencha Touch 2中的垂直按钮组？

Question

想要创建一个与Twitters自己的按钮组非常相似的垂直按钮组（例如http://mobile-patterns.com/#/i/10）

我已经尝试将Touch的代码更改为layout: 'vbox'，但它会完全调整每个按钮的圆度，并使其角落圆度与横向格式相同。

以下代码：

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] });

我是否需要添加自己的CSS样式才能使其正常工作？或者是否有内置配置？

我也想知道是否最好使用List代替SegmentedButton ......

谢谢！

Answer 1

Thiem是对的，我最终使用container来保持一组按钮。

通过执行以下操作，我能够达到同样的效果：

的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;
}

结果

这是最终结果的图像！

Answer 2

要轻松创建，自定义和最小化与其他组件的冲突，您应该将按钮容器定义为：

{
  xtype: 'container',
  items: [
    {xtype: 'button', text: '1', docked: 'top'},
    {xtype: 'button', text: '2', docked: 'top'},
    {xtype: 'button', text: '3', docked: 'top'},
  ]
}

docked配置确保您的按钮不会与容器的最大高度重叠。

最后一件事是将CSS属性添加到容器和内部按钮，以便像使用按钮的列表一样“伪造”它。据我所知，这是最简单的方法。

注意：你可以删除docked: 'top'配置，它仍然正常。所有这些都取决于你的CSS。