Extjs如何让滚动条出现？

Question

一旦表单比包含容器更宽，我需要显示滚动条。我在容器上设置了属性 autoScroll: true ，但它不起作用。有没有办法得到我需要的结果？

这是工作示例

http://jsfiddle.net/mQC3B/2/

代码

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

编辑

将layout: 'fit'添加到mainPanelContainer后，滚动条出现，但无法滚动到表单隐藏的右侧。

http://jsfiddle.net/mQC3B/3/

Answer 1

在您的编辑 fiddle 中，更改:

padding: '0 150 0 150',

在中心区域:

margin: '0 150 0 150',

不管你信不信，extjs 布局不能很好地处理 padding 属性。我以前在布局时遇到过这个问题。在您的示例中， margin 将努力实现您想要的目标。实现相同结果的另一种方法是使用边框布局嵌套另一个深度级别，并添加带有空白空间的东部和西部区域以模仿填充的行为。