没有获得带有 vbox 布局的可滚动标签面板 Extjs 4.x

Question

您好，我正在尝试使用 vbox 布局在选项卡面板中的选项卡上获得自动滚动条。

这对我不起作用。似乎忽略了“高度”配置值：

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items:  

    {
        xtype: 'tabpanel',
        items: [{
            autoScroll: true,
            height: 1000,
            title: 'Bar',
            layout: 'vbox',
            align: 'stretch',
            items: [
                {
                    xtype: 'panel',
                    flex: 1,
                    border: 1,
                    style: {borderColor:'#FF0000', borderStyle:'solid', borderWidth:'1px'},
                    html: 'hi!'
                },
                {
                    xtype: 'panel',
                    flex: 3,
                    border: 1,
                    style: {borderColor:'#00FF00', borderStyle:'solid', borderWidth:'1px'},
                    html: 'hi too!'
                }
            ]
        }]
    }        


}).show();

相反，这是完美的工作：

function getLongText(rc) {
    var lt = '';
    for(var i=0; i < 100; ++i) {
        lt += rc + '<br>';
    }
    return  lt += 'END<br>';
}

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items:  

    {
        xtype: 'tabpanel',
        items: [{
            autoScroll: true,
            title: 'Bar',
            html: getLongText('A')
        }]
    }        


}).show();

选项卡面板采用“适合”布局，应该没问题。我还故意将内面板高度设置为大于容器的高度。我负责在内部面板中指定“自动滚动”提示，这也应该没问题。

显然我可能对内部面板上的“高度”有疑问。它似乎没有任何效果。 Vbox布局应该根据每个包含的组件的“flex”属性来划分容器高度。

有什么想法吗？ 谢谢。

安德烈亚

Answer 1

首先，您错误地使用了align。它应该是布局的一部分，而不是面板。

而不是这个：

layout: 'vbox',
align: 'stretch',

使用这个：

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

但是，这不会达到您想要的效果，因为这只会使面板拉伸以使用完整的可见高度。

我不确定您要实现什么，因为您的第二个“解决方案”有效。如果您删除 vbox 布局并添加内容，面板应该会拉伸它们并为您提供您正在寻找的滚动条：

function getLongText(rc) {
    var lt = '';
    for(var i=0; i < 100; ++i) {
        lt += rc + '<br>';
    }
    return  lt += 'END<br>';
}
Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {
        xtype: 'tabpanel',
        items: [{
            autoScroll: true,
            height: 1000,
            title: 'Bar',
            items: [
                {
                    xtype: 'panel',
                    flex: 1,
                    border: 1,
                    style: {borderColor:'#FF0000', borderStyle:'solid', borderWidth:'1px'},
                    html: getLongText('hi!')
                },
                {
                    xtype: 'panel',
                    flex: 3,
                    border: 1,
                    style: {borderColor:'#00FF00', borderStyle:'solid', borderWidth:'1px'},
                    html: getLongText('hi too!')
                }
            ]
        }]
    }
}).show();

您究竟想用 vbox 做什么，使这个解决方案不可行？

Answer 2

在适合布局中，父容器将确定子容器的高度，因为子容器“适合”在父容器内。在您的情况下，选项卡面板的高度将根据窗口容器分配的高度计算。

编辑：（回复您的评论）

根据tabpanel 中的文档选项卡，使用卡片布局进行布局。

此布局管理多个子组件，每个子组件适合 容器...

我读到这意味着它处理类似于 Fit 布局的单个选项卡，其中高度是根据可用空间计算的。我可能错了，但这对我来说意味着什么。

但是，您可能想要探索卡片布局上的一个配置属性： http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.layout.container.Card-cfg-manageOverflow

Answer 3

我在调整大小事件上添加了一个监听器来获得垂直滚动，因为对于 Vbox，我们必须提供高度才能获得滚动，但是当窗口大小改变时，滚动条高度保持不变。

Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
    resize: {
        fn: function(el) {
            this.setHeight(this.up('window').getHeight()-150);  // 150  is extra for my panel coz of headers so have minus it.
            console.log("new height = " +   this.up('window').getHeight()-150);
        }
    }
},
title: "Update Data Configurations",

希望得到帮助。