Extjs how to make the scrollbar appear?

Question

I need to show a scrollbar as soon as the form is wider then containing container. I set the property autoScroll: true on the container, but it's not working. Is there anyway to get the result I need ?

Here is the working example

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

The code

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

EDIT

After adding layout: 'fit' to mainPanelContainer the scrollbar appears, but it's not possible to scroll to the hidden right side of the form.

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

Answer 1

In your fiddle for your edit, change:

padding: '0 150 0 150',

in the center region to:

margin: '0 150 0 150',

Believe it or not, extjs layouts do not handle the padding property very well. I have run into this before with my layouts. It looks like in your example, margin will work to achieve what you want. Another way to achieve the same result is to nest another level deep with a border layout and add east and west regions with the empty space to mimic the behavior of the padding.

Answer 2

autoScroll: true is the way to do it, but you'll need to have all of your layouts correct for it to work. Try putting layout: 'fit' on your mainPanelContainer and/or your form.

Answer 3

Basically you just need to add the autoScroll property like:

autoScroll: true