Extjs scrollbar doesn't appear - extjs

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