javascript - ExtJS 4.2.1 - 具有动态高度的边框布局

Question

我需要这样的布局:

https://fiddle.sencha.com/#fiddle/21i

我需要西过滤器面板可折叠，并且我的内容面板具有动态高度。

也可能是带有边框布局的面板具有完整的高度，并且溢出部分只是可滚动的...

尽管如果不设置面板的总高度，我就无法获得有效的边框布局。

请帮忙

更新

一个好的解决方法也将不胜感激......

编辑

具有动态生成内容的新 fiddler

https://fiddle.sencha.com/#fiddle/221

Answer 1

一个快速而肮脏的解决方法是渲染动态面板的主体并相应地调整主容器的高度。您需要考虑任何增加中心面板主体高度的因素。

例如，使用您的代码，您可以将这样的监听器添加到边框布局容器中:

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

查看您的updated fiddle .

更新打造更强大的解决方案

正如我在评论中所说，Ext4 使得使用“hbox”布局(可能还有大多数其他类型)制作可折叠面板变得非常容易。

这是一个很好的入门( fiddled there ):

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>"
                    })
                }
            }]
        }]
    });
});