sencha-touch - Sencha Touch : How to align buttons horizontally in an Ext. 面板？

Question

我正在尝试让两个按钮在 Ext.Panel 中彼此相邻显示。

.js 代码:

ProductView = new Ext.Panel({
    styleHtmlContent: true,
    scroll: 'vertical',
    items: [
        new Ext.DataView({
        scroll: false,
        store: productStore,
        tpl: productTpl,
        itemSelector: 'div.productView',
        }),
        {
            xtype: 'button',
            ui: 'blue-round',
            height: '60',
            text: 'Buy',
            handler: function() {
                // ...
            }
        },{
            xtype: 'button',
            ui: 'green-round',
            height: '60',
            text: 'Share',
            handler: function() {
                // ...
            }
        }

    ]
});

SCSS 代码:

@include sencha-button-ui('green', $branded-green);
@include sencha-button-ui('blue', $branded-blue);

这会产生如下所示的按钮:

我认为这可能是一个大小问题，但是将 width: '40%', 属性添加到每个按钮只会产生:

但是，我希望按钮并排放置，而不是堆叠在一起。有什么建议吗？

更新:我试图利用 align: 属性，但这什么也没做:

    {
        xtype: 'button',
        ui: 'blue-round',
        height: '60',
        width: '40%',
        align: 'left',
        text: 'Buy',
        handler: function() {
            // ...
        }
    },{
        xtype: 'button',
        ui: 'green-round',
        height: '60',
        width: '40%',
        align: 'right',
        text: 'Share',
        handler: function() {
            // ...
        }
    }

Answer 1

您可以将按钮包裹在一个面板中，并将该面板的布局设置为 hbox。这基本上就是您对工具栏所做的，但如果您不想要的话，它不会有工具栏样式。此外，仅供引用 hbox 布局，您可以为组件指定“flex”配置选项，这些选项确定它们相对于彼此的大小