ExtJS 4.2.x How do I make a gridpanel to resize based on the height of the rows inside of it?

Question

Given a gridpanel with some rows inside, if I click on 'Load more data' button at the bottom of the page, I would like to have it resized based on the height of the rows inside (including new ones). I want to get rid of the scrollbar and instead enlarge the gridpanel to show all rows at once. How can I do that?

Here is a fiddle for your convenience.

And here is the code:

Ext.onReady(function() {
    Ext.create('Ext.data.Store', {
        storeId: 'addressBook',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Pete',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Mark',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Luke',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }, {
                'name': 'Monica',
                "email": "[email protected]",
                "phone": "555-222-1254"
            }, {
                'name': 'Louis',
                "email": "[email protected]",
                "phone": "555-222-3333"
            }, {
                'name': 'Mary',
                "email": "[email protected]",
                "phone": "555-222-4444"
            }, {
                'name': 'Johann',
                "email": "[email protected]",
                "phone": "555-222-5555"
            }, {
                'name': 'Toby',
                "email": "[email protected]",
                "phone": "555-222-6666"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Address Book',
        store: Ext.data.StoreManager.lookup('addressBook'),
        columns: [{
            header: 'Name',
            dataIndex: 'name'
        }, {
            header: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            header: 'Phone',
            dataIndex: 'phone'
        }],

        dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
            items: [{
                xtype: 'button',
                text: 'Load more data',
                handler: function () {
                    var store = Ext.data.StoreManager.lookup('addressBook');
                    store.loadData([{
                        'name': 'Prince',
                        "email": "[email protected]",
                        "phone": "555-222-7777"
                    }, {
                        'name': 'Michael',
                        "email": "[email protected]",
                        "phone": "555-222-8888"
                    }], true);
                }
            }]
        }],

        height: 250,
        width: 400,
        renderTo: Ext.getBody()
    });
});

Answer 1

Well, it turned out to be pretty simple, I just need to remove the initial height definition.

    height: 250, // Remove this. That's it!