layout - 使用居中按钮创建2x2按钮网格？

我有一个2x2按钮网格。现在我想将按钮缩小到 200x200，将每个放在容器中作为空间占位符，然后居中各个容器中的每个按钮。

在我的形象中，我只是收缩两个顶部按钮，以便您可以看到页面上的间距。我怎样才能从第一张图像转到第二张图像 Photoshop'ed？

enter image description here

目标:(实际上，所有4个居中的按钮都是目标） enter image description here

档案：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>

使用居中按钮创建2x2按钮网格？

1 个答案: