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

3pmvbmvn  于 2023-01-17  发布在  其他
关注(0)|答案(3)|浏览(137)

我需要一个布局像这样的东西:
https://fiddle.sencha.com/#fiddle/21i
我需要西部过滤器面板是可折叠的,我的内容面板有一个动态的高度。
一种可能性也可能是,面板与寄宿生布局有一个完整的高度和溢出只是滚动...
虽然我没有得到一个有效的边框布局没有设置总高度到我的面板。
请帮帮忙

    • 更新**

一个很好的变通方案也将不胜感激...

    • 编辑**

具有动态生成内容的新小提琴手
https://fiddle.sencha.com/#fiddle/221

bfhwhh0e

bfhwhh0e1#

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

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

unguejic2#

您可以使用:

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

在容器(窗口、面板等)中,并且:

Flex: 1

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

dxpyg8gm

dxpyg8gm3#

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

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

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

相关问题