滚动条正在切断内容 extjs答案

【问题标题】：Scrollbar is cutting off content extjs滚动条正在切断内容 extjs
【发布时间】：2018-03-07 16:23:02
【问题描述】：

当向容器添加滚动条时，水平滚动条会切断容器底部的内容（仅在第一次按下切换按钮时）。

附上小提琴。请注意，我最终试图创建一个可以通过视图扩展的类，而超类的目的是为特定容器动态添加滚动条。举个例子，我创建了一个简化的小提琴：

https://fiddle.sencha.com/#view/editor&fiddle/2e3c

或者代码在这里：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create({
            xtype: 'panel',
            width:300,
            height: 300,
            title: 'test',
            renderTo: Ext.getBody(),
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                xtype: 'container',
               flex: 7,
                style: {
                    'border': '2px solid black'
                }
            },
            {
                xtype: 'container',
                flex: 3,
                itemId: 'lowerContainer',
                style: {
                    'border': '2px solid red'
                },
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'field1'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'field2'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'field3'
                }]
            }
            ],
            bbar: [{
                xtype: 'button',
                text: 'Toggle Scrolling',
                enableToggle: true,
                listeners: {
                    toggle: function(btn, pressed){
                        var lowerContainer = this.up('panel').down('#lowerContainer');
                        if (pressed){
                            lowerContainer.setScrollable({
                                y: 'scroll'
                            })
                        }
                        else {
                            lowerContainer.setScrollable(false);
                        }
                    }
                }
            }]
        })
    }
});

【问题讨论】：

标签： extjs scroll scrollbar scrollable

【解决方案1】：

如果您看到这样的奇怪现象，请尝试更新组件布局 lowerContainer.updateLayout();

fiddle

【讨论】：

【解决方案2】：

谢谢，Nikos Js！我很感激！

这当然解决了我的示例，但不幸的是并没有解决我的超类中的问题（我在创建示例时一定遗漏了一些东西）。但是，我找到了另一种解决问题的方法。原来，当我使用 setScrollable 方法将 y 设置为“滚动”时，我是在容器的外部 div 标签上设置滚动条。但是，内部容器 div 标记包含溢出容器的内容。反过来，我尝试将滚动条放在内部 div 标签上。我实施了另一个策略：

lowerContainer.setScrollable({
    y: 'scroll',
    x: true,
    element: lowerContainer.el.dom.querySelector('div[data-ref="innerCt"]')
});

【讨论】：