创建具有中心按钮一个2x2的按钮网格？(Creating a 2x2 Button Grid wit

我有一个2x2的按钮网格。现在我想缩小按钮200×200，将每个在容器中作为一个空间占位符，则在其各自的容器中心的每个按钮。

在我的形象，我只缩小了两个顶部按钮，这样你可以看到页面上的间距。我怎样才能从第一图像到第二图像，这是Photoshop'ed？

其目标是：（实际上，所有4个中心的按钮是目的）

文件：app.js

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {
            layout: {
                type: 'vbox'
            },
            items: [
                {
                    xtype: 'container',
                    layout: 'hbox',
                    flex: 1,
                    items:[
                        {
                            xtype: 'container',
                            layout: 'hbox',
                            flex: 1,
                            items:[
                                {
                                    xtype:'button',
                                    text: 'Home',
                                    ui: 'plain',
                                    style: 'background-color: #c9c9c9',
                                    height: 200,
                                    width: 200
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            layout: 'hbox',
                            flex: 1,
                            items:[
                                {
                                    xtype:'button',
                                    text: 'News',
                                    ui: 'plain',
                                    style: 'background-color: #b9b9cb',
                                    height: 200,
                                    width: 200
                                }
                             ]
                        }
                    ]
                },
                {
                    xtype: 'container',
                    layout: 'hbox',
                    flex: 1,
                    items:[
                        {
                            xtype:'button',
                            text: 'Mail',
                            ui: 'plain',
                            style: 'background-color: #a9c9c9',
                            flex: 1
                        },
                        {
                            xtype:'button',
                            text: 'Search',
                            ui: 'Search',
                            style: 'background-color: #c9c9c9',
                            flex: 1
                        }
                    ]
                }
            ]
        });
        Ext.Viewport.add(view);
    }
});

文件：index.html的

<!doctype html>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sencha</title>
    <link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript"
    src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
<body>
</body>
</html>

只需添加centered:true所有按钮的配置。

祝好运。

P / S：该配置实际上将组件设置到它的父组件的中心（水平＆垂直地）。