Question

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

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

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);
                        }
                    }
                }
            }]
        })
    }
});

Answer 1

如果你看到这样的怪异，请尝试更新组件布局 lowerContainer.updateLayout（）;

fiddle

Answer 2

谢谢，Nikos Js！我很感激！

这肯定修复了我的例子，但遗憾的是没有解决我的超类中的问题（我必须在创建示例时遗漏了一些东西）。但是，我找到了另一种解决问题的方法。事实证明，当我将y设置为＆＃34;滚动＆＃34;使用setScrollable方法，我在容器的外部div标签上设置滚动条。但是，内部容器div标签保存了溢出容器的内容。反过来，我尝试将滚动条放在内部div标签上。我实施了另一种策略：

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

滚动条正在切断内容extjs

2 个答案: