Question

我从另一个问题中获取此代码，现在我正试图让四个按钮填满整个窗口。

我所做的一切似乎都没有影响。 fullscreen: true选项似乎总是被忽略。知道你需要调整布局以便占用所有垂直空间的诀窍是什么？

理想情况下，我希望此解决方案也适用于3x3按钮布局。

enter image description here

app.js

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {
            // fullscreen: true,
            layout: {
                type: 'vbox',
                flex: 1
            },
            items: [{
                xtype: 'container',
                layout: 'hbox',

                items: [{
                    xtype: 'button',
                    height: '50%',
                    text: 'flat button',
                    ui: 'plain',
                    flex: 1,
                    handler: function() {
                        alert('top left')
                    }
                }, {
                    xtype: 'button',
                    height: '50%',
                    //ui: 'plain',
                    flex: 1,
                    handler: function() {
                        alert('top right')
                    }
                }]
            }, {
                xtype: 'container',
                layout: 'hbox',
                items: [{
                    xtype: 'button',
                    height: '50%',
                    //ui: 'plain',
                    flex: 1,
                    handler: function() {
                        alert('bottom left')
                    }
                }, {
                    xtype: 'button',
                    //ui: 'plain',
                    height: '50%',
                    flex: 1,
                    handler: function() {
                        alert('bottom right')
                    }
                }]
            }]
        });
        Ext.Viewport.add(view);
    }
});

使用Sencha Touch CDN的标准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>

Answer 1

我修改了一些内容以满足您的需求（3x3按钮布局）。祝好运！：）

P / S：我删除了处理程序函数，以便更容易捕获源代码。

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {
            layout: {
                type: 'vbox',
            },
            items: [
                {
                    xtype: 'container',
                    layout: 'hbox',
                    flex: 1,
                    items:[
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        }
                    ]
                },
                {
                    xtype: 'container',

                    layout: 'hbox',
                    flex: 1,

                    items:[
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        }
                    ]
                },
                {
                    xtype: 'container',

                    layout: 'hbox',
                    flex: 1,

                    items:[
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        }
                    ]
                }
            ]
        });
        Ext.Viewport.add(view);
    }
});

Answer 2

Thiem Nguyen的答案可能适用于你需要的东西，但这可以用于拉伸屏幕上的按钮。

view = Ext.create('Ext.Container', {
        layout:'hbox',
        items:[ {
            xtype: 'container',
            width:'50%',
            layout: 'vbox',
            items:[{
                xtype:'button',
               // ui: 'plain',
                flex: 1,
                handler:function(){
                    alert('top left')
                }
            },{
                xtype:'button',
              // ui: 'plain',
                flex: 1,
                handler:function(){
                    alert('top right')
                }
            }]
        },{

            xtype: 'container',
            width:'50%',
            layout: 'vbox',
            items:[{
                xtype:'button',
               // ui: 'plain',
                flex: 1,
                handler:function(){
                    alert('bottom left')
                }
            },{
                xtype:'button',
              //  ui: 'plain',
                flex: 1,
                handler:function(){
                    alert('bottom right')
                }
            }]
        }]
});

如何使按钮网格调整大小以适应屏幕？

2 个答案: