一个快速而粗略的解决方法是让呈现动态面板的主体并相应地调整主容器的高度。您需要考虑任何增加中心面板主体高度的因素。
例如，使用您的代码，可以向边框布局容器中添加如下侦听器：

listeners: {
    delay: 1,
    afterrender: function() {
        this.setHeight(
            this.down('[region=center]').body.getHeight()
            + this.getHeader().getHeight()
            // also account for borders, margins, etc. if needed
        );
    }
}

查看您的更新小提琴。

更新以实现更强大的解决方案

正如我在评论中所说的，Ext4使使用“hbox”布局的面板折叠变得相当容易，可能还有大多数其他类型的面板。
这里有一个很好的开端（拨弄那里）：

Ext.onReady(function() {
    Ext.widget('viewport', {
        layout: {
            type: 'hbox'
            ,align: 'stretch'
        }
        ,items: [{
            title: 'left'
            ,width: 150
            ,resizable: true
            ,resizeHandles: 'e'
            ,style: {
                borderRight: '2px solid #157FCC'
            }
            ,collapsible: true
            ,collapseDirection: 'left'
            ,defaultType: 'button'
            ,layout: {
                type: 'vbox'
                ,align: 'stretch'
            }
            ,items: [{
                text: "Foo"
            },{
                text: "Bar"
            },{
                text: "Baz"
            }]
        },{
            title: 'center'
            ,flex: 1
            ,autoScroll: true
            ,tbar: [{
                text: "Add content"
                ,handler: function() {
                    this.up('panel').add({
                        html: "<p>Lorem ipsum dolor sit amet...</p>"
                    })
                }
            }]
        }]
    });
});

您可以使用：

layout: {
            type: 'vbox',
            align : 'stretch',
            pack  : 'start'
        }

在容器（窗口、面板等）中，并且：

Flex: 1

在一个组件中，比如一个网格。
根据我的经验，效果很好。（如Sencha网站和论坛评论中的布局示例所示）

删除“边框”布局并将其替换为

layout: {
  type: 'hbox',
  pack: 'start',
  align: 'stretch'
},

现在，您可以删除高度，它将动态拟合