Question

您好我正在尝试使用vbox布局在tabpanel的选项卡上获取自动滚动条。

这不适合我。似乎忽略了“height”配置值：

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();

tabpanel采用'fit'布局，应该没问题。我也故意将内板高度设置为大于容器的高度。我负责在内部面板中指定'autoscroll'提示，这也应该没问题。

显然我可能在内部面板上遇到“高度”问题。它似乎没有任何影响。 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的高度将根据窗口容器分配的高度计算。

编辑 :(回复您的评论）

根据tabpanel中的文档标签显示了卡片布局。

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

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

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

Answer 3

我在resize事件上添加了一个监听器来获取垂直滚动，就像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",

希望这有帮助。

没有得到可滚动的tabpanel Extjs 4.x与vbox布局

3 个答案: