How to make button grid resize to fit screen?

I took this code from another question and now I'm trying to get the four buttons to fill the entire window.

Nothing that I do seems to have an affect. The fullscreen: true option seems to always be ignored. What's the trick to know you need to adjust the layout so that it takes all the vertical space?

Ideally, I'd like this solution to work for a 3x3 button layout too.

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

Standard index.html that uses Sencha Touch CDN.

<!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>

标签： sencha-touch-2

2条回答

可以哭但决不认输i

2楼-- · 2019-08-02 07:46

Thiem Nguyen's answer might work for what you need but this will work for stretching the buttons across the screen.

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')
                }
            }]
        }]
});

0人赞添加讨论(0) 举报

萌系小妹纸

3楼-- · 2019-08-02 07:49

I've modified something to meet exactly what you need (3x3 buttons layout). Good luck! :)

P/S: I've removed handler functions to make the source code easier to catch.

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

0人赞添加讨论(0) 举报

How to make button grid resize to fit screen?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间