Extjs滚动条没有'；不出现

我有一个类似于这个主题的问题：，但太多的事情让我困惑

我需要显示一个滚动条，只要形式比包含容器更宽。为什么autoScroll:true不起作用

结合这个问题，我将给出三个不同的例子。最需要的——第一个前任。 1.

没有滚动条

…fiddle.sencha.com/#fiddle/j2f

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Form Panel',
    bodyPadding: '5 5 0',
    width: 600,   
    items: [{
        xtype: 'container',
        padding: '5',
        layout: 'anchor',

fieldDefaults: {
    labelAlign: 'top',
    msgTarget: 'side'
},
defaults: {
    border: false,
    xtype: 'panel',
    layout: 'anchor'
},

layout: 'hbox',
items: [{
    items: [{
        xtype:'textfield',
        fieldLabel: 'First Name',
        anchor: '-5',
        name: 'first',                
    }]
}, {
    items: [{
        xtype:'textfield',
        fieldLabel: 'Last Name',
        anchor: '100%',
        name: 'last'
    }]
}], 
}], 
}); //Ext.create('Ext.container.Viewport', {});

它可以工作，直到注释了最后一行Ext.create（'Ext.container.Viewport'，{}）； 如果我删除items视口中的代码，则观察到相同的行为

…fiddle.sencha.com/#fiddle/j2g

Ext.create('Ext.container.Viewport', {
padding: '5',

items: [{
id: 'mainPanelContainer',
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
//width: 600,

items: [{ //outer container
    autoScroll: true,
    xtype: 'container',
    padding: '5',
    layout: 'anchor',
    width: 600,

    items: [{

        xtype: 'container',
        padding: '5',
        layout: 'column',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'text1',
            name: 'Name1',
            columnWidth: .3
        }, {
            xtype: 'textfield',
            fieldLabel: 'text2',
            name: 'Name2',
            columnWidth: .7
        }], //container items
    }], //outer container items
}, ] //form items
}, ]});

滚动工作直到宽度：600在该位置设置，但在注释位置不工作

---

很抱歉在2、3中出现了外部代码，例如一些不规则的代码片段。

在使用滚动时，不应使用

'anchor'

布局

正如您在中所看到的，我使用了

'fit'

布局。 如果您使用ExtJS5，我不建议您使用

'autoScroll'

config（已弃用），请改用

'scrollable'

。（）

---

我把布局改成了自动，这对我来说成功了。现在可以添加/删除面板，滚动条将自动显示/隐藏

    var workActivityPanel = new Ext.Panel({
        region: 'center',
        autoScroll: true,
        layout: {
            type: 'auto',
            align: 'stretch'
        }
    });

---

在#2（）和#3（）thx中也有相同的内容，但如果我需要锚定布局呢？为什么在ex2中使用锚定滚动可以工作？实际上，锚定布局也可以工作。在第一个练习中，由于列布局的原因，它不起作用，用hbox替换它，它会起作用，但我需要列布局

var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'fit',

items: [{
    itemId: "TPMethodContentProvider",
    xtype: "form",
    layout: 'fit',
    width: 600,
    items: [{
                margin: 10,
                padding: 5,
                xtype: "container",
                scrollable: 'horizontal',
                layout: 'hbox',

                items: [{
                    itemId: "S1",
                    margin: 5,
                    xtype: 'textfield',
                    fieldLabel: "type:",
                    scrollable: 'horizontal',
                    labelWidth: 140,
                    tabIndex: 0,
                    value: "bd",
                }, {
                    itemId: "S2",
                    margin: 5,
                    xtype: 'textfield',
                    scrollable: 'horizontal',
                    fieldLabel: "num:",
                    labelWidth: 140,
            }] //panel items
        }] // form items
    }] //win items
});

win.show();

    var workActivityPanel = new Ext.Panel({
        region: 'center',
        autoScroll: true,
        layout: {
            type: 'auto',
            align: 'stretch'
        }
    });