ExtJS 4 Stretch height of the grid to parent component

Question

I'm trying to stretch height of the xtype: 'grid1' to its parent element (tab on a tabpanel).

Here is my code:

Ext.define('My.view.Example', {
    extend: 'Ext.tab.Panel',
    region: 'center',
    id: 'objectsManageArea',
    items: [{
        title: "Tab 1",
        items: [
            {
                border: false,
                items: [
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        border: false,
                        items: [
                            {
                                xtype: 'grid1',
                                flex: 1
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        title: "Tab 2",
        items: [
            {
                xtype: 'panel',
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                border: false,
                items: [
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        flex: 1,
                        border: false,
                        items: [
                            {
                                xtype: 'grid2',
                                flex: 1
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'vbox',
                            align: 'stretch',
                            pack: 'center'
                        },
                        items: [
                            {
                                xtype: 'button',
                                iconCls: 'icon-greater-than',
                                margin: '0 5 5 5'
                            },
                            {
                                xtype: 'button',
                                iconCls: 'icon-less-than',
                                margin: '0 5 0 5'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        flex: 1,
                        border: false,
                        items: [
                            {
                                xtype: 'treegrid1',
                                flex: 1
                            }
                        ]
                    }
                ]
            }
        ]
    }]
});

On 'Tab 2' (with grid, panel with two buttons and treegrid) everything is ok, but on 'Tab 1' nested xtype: 'grid1' is set to the height of its content. I tried various versions with vbox, but nothing works. What could be the problem?

Answer 1

You want layout: 'fit'. From the docs: This is a base class for layouts that contain a single item that automatically expands to fill the layout's container.

However, I would recommend that you try to avoid over-nesting components. In your Tab 1 config, the grid can be the tab itself and will automatically fill the entire space in that case. You could do the same thing with the treepanel in tab 2.

See jsFiddle here. Tab 1 is just a grid as the tab itself. Tab 2 is a regular panel with layout: 'fit' with a grid as it's single item.