Creating a 2x2 Button Grid with Centered Buttons?

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/10126628/creating-a-2x2-button-grid-with-centered-buttons

标签

layout

extjs

sencha-touch-2