Sencha Touch:如何在Ext.Panel中水平对齐按钮？

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布局的fyi,您可以为组件指定'flex'配置选项,以确定它们相对于彼此的大小