如何在Sencha Touch中的vbox布局中的按钮之间设置空格

Question

我有一个屏幕，我认为vbox应该是正确的布局。 我想要的是一个屏幕上有3个或4个按钮的屏幕，它们均匀地分布在屏幕上。 按钮周围应有空格并居中。

这是我的代码：

{
                title: 'Main Menu',
                iconCls: 'organize',
                layout: 'vbox',
                scrollbale: true,
                items: [{
                            xtype: 'titlebar',
                            title: 'Main Menu',
                            docked:'top'
                        },
                        {
                            xtype: 'button',
                            text: 'Button 1',
                            //cls: 'menu_button',
                            flex: 1,
                            ui: 'round',
                            //align: 'center',
                            style: 'margin: 10px; width: 85%; height:30px !important;',
                            //pack:'center',
                            handler: function () {
                                // navigate to the Quote page
                                                }
                        },
                        {
                            text: 'About',
                            xtype: 'button',
                            ui: 'round',
                            centered: true,
                            //cls: 'menu_button',
                            style: 'margin: 10px; width: 85%; height:30px;',
                            flex: 1,
                            handler: function () { }
                        },
                        {
                            text: 'FAQ',
                            xtype: 'button',
                            //cls: 'menu_button',
                            style: 'margin: 10px; width: 85%; height:30px !important;',
                            flex: 1,
                            ui: 'round',
                            handler: function () { }
                        }]

            }

为了清楚我的问题，这是截图

正如你所看到的，即使我已经设置了它们的宽度和高度，按钮也不均匀，它们之间没有空格。

我想要的布局是这样的：

请指出正确的方向。

谢谢你的朋友们。

Answer 1

喜欢这个吗？

http://jsfiddle.net/woosah/3zdc7/5/

config: {
        fullscreen: true,
        scrollable: true,
        layout: 'vbox',
        defaults: {
            flex: 1
        },
        items: [{
            xtype: 'titlebar',
            title: 'Main Menu',
            docked: 'top'
        }, {
            xtype: 'button',
            text: 'Button 1',
            ui: 'round',
            margin: '40px 40px 0 40px'
        }, {
            text: 'About',
            xtype: 'button',
            ui: 'round',
            margin: '40px 40px 0 40px'
        }, {
            text: 'FAQ',
            xtype: 'button',
            ui: 'round',
            margin: '40px'
        }]
}