Sencha touch 2 如何调整按钮网格的大小以适应屏幕？

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

我所做的一切似乎都没有影响。

fullscreen:true

选项似乎总是被忽略。要知道需要调整布局以占用所有垂直空间的诀窍是什么

理想情况下，我希望此解决方案也适用于

3x3

按钮布局

---

app.js

---

使用Sencha Touch CDN的标准index.html

森查

我修改了一些东西，以完全满足您的需要（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);
    }
});

---

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

---

看起来“高度”导致了一个问题，“flex:1”已从vbox中删除并放置在两个hbox上。有没有什么我错过的一般规则？是的

flex

只是缩放hbox或vbox内部子组件的相对宽度/高度，所以不要在最外层的集装箱中使用它。我认为在每个箱子上说“flex:1”与使用“宽度：50%”或“高度：50%”是一样的。你们两个都投了赞成票，但既然蒂姆是第一个，我就接受他的回答。我在其他Sencha学习问题中通读了你们的两个解决方案，我一定会投票给其他好的答案。谢谢大家。是的，使用弹性和宽度/高度有点多余。没有怨恨哈。

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

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