ExtJS 4.2.x如何使gridpanel根据其内部行的高度调整大小？

给定一个网格面板，其中有一些行，如果我单击页面底部的“加载更多数据”按钮，我希望根据其中的行（包括新行）高度调整其大小。我想去掉滚动条，而是放大gridpanel，一次显示所有行。我该怎么做

为了您的方便，这里有一个电话号码

代码如下：

Ext.onReady(function() {
    Ext.create('Ext.data.Store', {
        storeId: 'addressBook',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Pete',
                "email": "pete@abc.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Mark',
                "email": "mark@abc.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Luke',
                "email": "luke@abc.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Monica',
                "email": "monica@abc.com",
                "phone": "555-222-1254"
            }, {
                'name': 'Louis',
                "email": "louis@abc.com",
                "phone": "555-222-3333"
            }, {
                'name': 'Mary',
                "email": "mary@abc.com",
                "phone": "555-222-4444"
            }, {
                'name': 'Johann',
                "email": "johann@abc.com",
                "phone": "555-222-5555"
            }, {
                'name': 'Toby',
                "email": "toby@abc.com",
                "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": "prince@abc.com",
                        "phone": "555-222-7777"
                    }, {
                        'name': 'Michael',
                        "email": "michael@abc.com",
                        "phone": "555-222-8888"
                    }], true);
                }
            }]
        }],

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

---

结果很简单，我只需要删除初始高度定义

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

---

考虑添加一个Max Hype属性，使网格不显示在Browser.you之外，想要一个带有橡胶自动扩展大小的表吗？