1

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

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

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

在此处输入图像描述

应用程序.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>
4

2 回答 2

0

我已经修改了一些东西以满足您的需求（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);
    }
});
于 2012-04-11T19:16:11.357 回答
0

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')
                }
            }]
        }]
});
于 2012-04-11T19:29:14.250 回答