Extjs如何显示滚动条？

我需要显示一个滚动条尽快形成更广泛的，然后包含容器。我在容器上设置了属性autoScroll:true，但它不起作用。有没有办法得到我想要的结果

下面是一个工作示例

代码

Ext.create('Ext.container.Viewport', {

    layout: {
        header: false,
        type: 'border',
        padding: 0
    },
    items: [{
            region: 'north',
            padding: '0 150 0 150',
            height: 36,
            html: 'header'
        }, {
            id:'mainPanelContainer',
            autoScroll: true,
            padding: '0 150 0 150',
            region: 'center',
            items:[
                {
                    xtype:'form',
                    items:[{
                        xtype: 'container',
                        flex: 1,
                        layout: 'anchor',
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            anchor: '95%',
                            xtype: 'htmleditor',
                            fieldLabel: 'Popis',
                            name: 'Description',
                            height: 240,
                            width: 450
                        }]
                    }, {
                        xtype: 'container',
                        flex: 1,
                        layout: 'anchor',
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            xtype: 'container',
                            margin: '0 0 8 0',
                            layout: 'hbox',
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: 'Name',
                                name: 'Name'
                            }, {
                                xtype: 'textfield',
                                fieldLabel: 'Name',
                                name: 'Name'
                            }]
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }]
                    }]
                }
            ]
        }, {
            region: 'south',
            height: 25,
            padding: '0 150 0 150',
            html: 'Copyright © 2013'
        }]
});

编辑

将布局添加到mainPanelContainer后，将显示滚动条，但无法滚动到窗体的隐藏右侧

---

autoScroll:true

是实现此功能的方法，但您需要所有布局都正确，才能使其正常工作。尝试将

layout:“fit”

放在

mainPanelContainer

和/或

表单中，以便编辑，更改：

padding: '0 150 0 150',

在中心区域中，要：

margin: '0 150 0 150',

信不信由你，extjs布局不能很好地处理padding属性。我以前在布局方面遇到过这种情况。在您的示例中，保证金将用于实现您的目标。实现相同结果的另一种方法是使用边框布局嵌套另一层，并使用空白空间添加东区域和西区域，以模拟填充的行为。
如果删除嵌套表单，只将填充放在总体容器（本例中的视口）上据我所知，这似乎能让你得到你想要的东西


基本上，您只需要添加autoScroll属性，如：

autoScroll: true

我将布局适合设置添加到mainPanelContainer。滚动条被推入，但您无法将其滚动到窗体的右端。将填充更改为边距后，滚动条看起来很好。但我仍然无法在较小的屏幕上滚动到表单的右侧。拿出布局：“适合”并给表单一个宽度。还要注意使用
border:0
——这也会关闭滚动条。这是ExtJS被严重破坏的另一个好例子
autoScroll: true