ExtJs：可滚动的选项卡面板在多个选项卡中无法正常工作

Question

我有下图的布局

代码：fiddle

问题是当我有多个选项卡时（第一个选项卡 & 第二个选项卡）第二个选项卡中的内容不符合滚动条，所以它会因为没有滚动条而拖住内容

但是当我删除第一个选项卡作为 第二张图片（注释第 15 行）时，我让它工作得很好。

那么，我怎样才能拥有多个选项卡并保持滚动条和 发送选项卡 面板内容之间的边缘？

Answer 1

短

你的例子对我有用。

改进的替代方案

我建议将滚动条添加到选项卡面板内的组件。

通常高度由子组件的高度定义。我猜你正在使用 minHeight 来模拟东西。

这是我的详细方法：

Ext.define('myapp.layout', {
    extend: 'Ext.container.Viewport',
    
    layout: 'border',
    
    items: [
        {xtype: 'panel', title: 'north', region: 'north', height: 100, border: 1},
        {xtype: 'panel', title: 'west', region: 'west', width: 100, border: 1},
        {
            xtype: 'tabpanel', region: 'center',
            
            items: [
                {xtype: 'panel', title: 'first tab'},
                {xtype: 'panel', title: 'second tab',

                    // =>
                    scrollable: true,
                    
                    bodyPadding: 10,
                    layout: {type: 'vbox', pack: 'start', align: 'stretch'},
                    items: [
                        {xtype: 'panel', title: 'First Line', height: 100, border: 1},
                        {xtype: 'panel', title: 'Second Line',
                        
                        // =>
                        minHeight: 900, flex: 1,
                        
                        border: 1},
                    ]
                },
            ]
        }
    ]
});

这里我模拟 second line 最终高度为 900 ==> 因此 scrollable 被设置为父组件。

ExtJs：可滚动的选项卡面板在多个选项卡中无法正常工作

ExtJs: scrollable tabpanel did not work properly in multiple tabs

extjs

extjs7