布局问题

Question

我的目标是想出这样的想法：
有视口与边框布局。 “容器”和“中心”都有“适合”的布局。 “面板”具有“vbox”布局并具有三个元素。第一次加载时，网格有一行。我希望所有网格都能抓住顶部和底部的所有高度和按钮面板。如果我没有指定网格或“容器”或“面板”的高度，我什么都看不到 我怎样才能使它发挥作用？

Answer 1

移除多余的面板，使网格面板本身成为边框布局的中心区域。 “按钮面板”应该是网格面板的工具栏：

new Ext.Viewport({
    layout: 'border',
    items: [
        {
            region: 'center',
            xtype: 'grid',
            // ... other required grid properties, like 'store' and 'columns'
            tbar: [
                // Top toolbar. Items are Ext.Button instances.
                {
                    text: 'Button 1'
                },
                {
                    text: 'Button 2'
                }
            ],
            bbar: [
                // Bottom toolbar. Items are Ext.Button instances.
                {
                    text: 'Button 3'
                },
                {
                    text: 'Button 4'
                }
            ]
        }
    ]
});

Answer 2

问题是网格和元素会想要使用尽可能少的垂直空间，除非你在它们上设置一个固定的高度。最好的解决方案是使用最小高度样式以允许网格随时长度增长，但始终至少是某个最小值。

Answer 3

如果您发布了一些代码会很有帮助。如果面板有一个tbar和bbar，它的唯一项目是一个gridpanel，那么你可以给gridpanel一个flex（我认为任何数字都可以工作），你probalbaly想要layoutConfig对齐：'stretch'。在vbox布局中，如果未提供子项的flex，它将使用子项的原始高度。

Panel({
     layout: {
                type: 'vbox',
                align: 'stretch'
     },
     tbar: {},
     bbar: {},
     items : [{
         xtype:'grid',
         flex: 1
    }]
})