1

嗨，我正在尝试使用 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”属性来划分容器高度。

任何想法？谢谢。

安德烈亚

4

3 回答 3

0

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

编辑：（回复您的评论）

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

此布局管理多个子组件，每个子组件都适合Container ...

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

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

于 2013-06-18T17:16:12.650 回答
0

首先，您使用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 做什么，使这个解决方案不可行？

于 2013-06-18T17:05:08.683 回答
0

我在 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",

希望这有帮助。

于 2016-05-03T15:18:41.757 回答