创建带有中心按钮的2x2按钮网格？ [英] Creating a 2x2 Button Grid with Centered Buttons?

问题描述

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

在我的图片中，我只有
收缩了两个顶部的按钮，所以你可以看到页面上的间距。
如何从第一个图像转到第二个图像，这是
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，
项目：[
 {
 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：'backg圆形：＃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 =stylesheethref =http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources /css/sencha-touch.csstype =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 / javascriptsrc =app.js>< / script > 
< body> 
< / body> 
< / html> 
 
 

解决方案

只需将居中：添加到所有按钮的配置中。

祝你好运。

P / S：该配置实际上将您的组件设置为其父级中心（水平和垂直）组件。

I have a 2x2 button grid. Now I'd like to shrink the buttons to 200x200, place each in a container as a space place holder, then center each button in its respective container.

In my image, I've only shrunk the two top buttons so you can see the spacing on the page. How can I go from the first image to the second image, which was Photoshop'ed?

The goal: (actually, all 4 centered buttons is the goal)

File: 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);
    }
});

File: 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>

解决方案

Simply add centered:true to the configuration of all your buttons.

Good luck.

P/S: that config actually set your component to the center (horizontally & vertically) of its parent component.

这篇关于创建带有中心按钮的2x2按钮网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！