title: Extjs how to make the scrollbar appear?
body: <p>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 ?</p>
  
  <p>Here is the working example</p>
  
  <p><a href="http://jsfiddle.net/mQC3B/2/" rel="noreferrer">http://jsfiddle.net/mQC3B/2/</a></p>
  
  <p>The code</p>
  
  <pre><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 &amp;copy; 2013'
          }]
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>After adding layout: 'fit' to mainPanelContainer the scrollbar appears, but it's not possible to scroll to the hidden right side of the form.</p>
  
  <p><a href="http://jsfiddle.net/mQC3B/3/" rel="noreferrer">http://jsfiddle.net/mQC3B/3/</a></p>