title: Extjs scrollbar doesn't appear
body: <p>I have a problem like in this topic:  <a href="https://stackoverflow.com/questions/18232448/extjs-how-to-make-the-scrollbar-appear">Extjs how to make the scrollbar appear?</a>, but too many things are confusing for me. </p>
  
  <p>I need to show a scrollbar as soon as the form is wider than the containing container. Why is autoScroll: true not working? </p>
  
  <p>I will give three different examples, combined with this problem. The most needed - the first ex.
   1. <a href="https://fiddle.sencha.com/#fiddle/j2c" rel="nofollow noreferrer">https://fiddle.sencha.com/#fiddle/j2c</a></p>
  
  <pre><code>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();
  </code></pre>
  
  <p>No scrollbar. </p>
  
  <ol start="2">
  <li><p>..fiddle.sencha.com/#fiddle/j2f</p>
  
  <pre><code>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', {});
  </code></pre></li>
  </ol>
  
  <p>It works, until commented last line Ext.create('Ext.container.Viewport', {});
  If I remove the code inside items Viewport observed the same behavior. </p>
  
  <ol start="3">
  <li><p>..fiddle.sencha.com/#fiddle/j2g..</p>
  
  <pre><code>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
  }, ]});
  </code></pre></li>
  </ol>
  
  <p>Scroll works until width: 600 set in that place, but doesn't work in the commented place.</p>
  
  <p>Sorry for outer code in 2, 3 ex. Some unhandy snippets code.</p>