2

希望创建一个看起来与 Twitter 自己的按钮组非常相似的垂直按钮组（例如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 样式才能使其正常工作？还是有内置配置？

我也想知道是否最好使用 aList而不是 a SegmentedButton...

谢谢！

4

2 回答 2

3

蒂姆是对的，我最终用它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;
}

结果

这是最终结果的图像！

垂直按钮组

于 2012-07-06T17:51:26.480 回答
1

为了轻松创建、自定义和最小化与其他组件的冲突，您应该定义一些东西作为您的按钮容器，例如：

{
  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。

于 2012-07-06T17:38:44.547 回答