Question

我需要这样的布局：

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

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

一种可能性是，带有边框布局的面板有一个完整的高度，溢出只是可滚动的......

虽然我没有设置有效的边框布局而没有为我的面板设置总高度。

请帮忙

更新

一个好的解决方法也将受到赞赏......

修改

带有动态生成内容的新提琴手

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

Answer 2

您可以使用：

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

在容器中（窗口，面板，..）和

Flex: 1

在一个组件内，如网格。

根据我的经验，效果很好。（正如Sencha网站和论坛评论的布局示例中所建议的那样）

Answer 3

删除＆＃39;边框＆＃39;布局并替换为

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

现在你可以移除高度，它将动态适应

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

3 个答案: