Problem with layouts

Question

My goal is to make somethink like this:
There is viewport with border layout. "Container" and "center" both have "fit" layout. The "Panel" has 'vbox' layout and has three elements. The grid has one row when loaded the first time. I want all the grid to catch all the height and the button panels on top and in the bottom of it. If I don't specify the height of the grid or "container" or "Panel", I don't see anything.
How can I make it work?

Answer 1

Remove the excess panels and make the grid panel itself the center region of the border layout. The "button panels" should be toolbars of the grid panel:

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

The problem is that grids and elements will want to use the least amount of vertical space possible unless you set a fixed height on them. The best solution is to use a min-height style to allow the grid to grow as long as it wants but always be at least some minimum value.

Answer 3

It would be helpful if you posted some code. If the panel has a tbar and bbar and it's only items is a gridpanel then you could give the gridpanel a flex (I think any number will work)and you probalbaly want the layoutConfig to be align : 'stretch' . In a vbox layout if a child's flex is not provided it will use the original height of the child.

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