Extjs scrollbar doesn't appear

Question

I have a problem like in this topic: Extjs how to make the scrollbar appear?, but too many things are confusing for me.

I need to show a scrollbar as soon as the form is wider than the containing container. Why is autoScroll: true not working?

I will give three different examples, combined with this problem. The most needed - the first ex. 1. https://fiddle.sencha.com/#fiddle/j2c

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

items: [{
    itemId: "TPMethodContentProvider",
    xtype: "form",
    autoScroll: true,
    layout: 'anchor',
    anchor: "100%",

    items: [{
        xtype: "container",
        padding: 5,
        layout: 'anchor',
        anchor: "100%",
        autoScroll: true,
        items: [{
                margin: 5,
                padding: 5,
                width: 850,
                xtype: "container",
                autoScroll: true,
                anchor: "100%",
                layout: 'column',

                items: [{
                    columnWidth: 0.7,
                    items: [{
                        itemId: "S1",
                        margin: 5,
                        xtype: 'textfield',
                        anchor: "95%",
                        fieldLabel: "type:",
                        labelWidth: 140,
                        tabIndex: 0,
                        value: "bd",

                    }],
                    layout: "anchor"
                }, {
                    columnWidth: 0.3,
                    items: [{
                        itemId: "S2",
                        margin: 5,
                        xtype: 'textfield',
                        anchor: "95%",
                        fieldLabel: "num:",
                        labelWidth: 140,
                    }],
                    layout: "anchor"
                }, ] //panel items
        }] // some container items
    }] // form items
}] }); win.show();

No scrollbar.

2. ..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', {});
   

It works, until commented last line Ext.create('Ext.container.Viewport', {}); If I remove the code inside items Viewport observed the same behavior.

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

Scroll works until width: 600 set in that place, but doesn't work in the commented place.

Sorry for outer code in 2, 3 ex. Some unhandy snippets code.

Answer 1

You shouldn't use 'anchor' layout in case of scroll usage.

As you can see in the fiddle, I used 'fit' layout instead. If you use ExtJS5 I do not recommend you to use 'autoScroll' config(it's deprecated), use 'scrollable' instead. (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-scrollable)

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();

Answer 2

I changed the layout to auto, which did the trick for me. Now it is possible to added/remove panels and the scroll-bar will automatically show/hide.

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