title: How to make horizontal scroll bar visible only when it is needed?
body: <p>I want vertical scroll bar and horizontal scroll bars only when they are needed(for eg. screen is minimized), so I wrapped my main panel into a panel having <strong>autoScroll</strong> property true and that in turn into a panel having <strong>layout: fit</strong> . Now the vertical scroll bar appears only when needed but horizontal scroll bar doesn't appear.  </p>
  
  <p>What can be the way to make the <strong>horizontal scroll bar</strong> too appear when needed?  Any help would be appreciated.  </p>
  
  <p>Please find my code below:  </p>
  
  <pre><code>Ext.define('ORT.view.survey.wizard.StepTemp3', {
  extend: 'Ext.form.Panel',
  
  alias : 'widget.surveywizardsteptemp3',
  
  title: 'Survey Wizard - Step temp 3',
  
  id : 'surveyWizardtemp3',
  
  layout:'fit',
  
  items:[{
      xtype:'panel',
      autoScroll:true,
      border:false,
      items:[{
          xtype:'panel',
          border:false,
          layout: {
              type: 'vbox',
              align:'stretch'
          },
          items:[{
              border: false,
              margin:10,
              layout:{
                  type: 'hbox',
                  align: 'top',
                  pack: 'start'
              },
              defaults:{margins:'0 10 0 0'},
  
              items:[{
                  flex:1,
                  border: false,
                  cls: 'blueSurveyBox',
                  layout:{
                      type:'vbox',
                      align: 'stretch',
                      padding:'10 5 0 10'
                  },
                  defaults:{margins: '0 0 15 0'},
                  items:[{
                      border: false,
                      layout:{
                          type:'hbox',
                          align:'top'
                      },
                      items:[{
                          border: false,
                          xtype:'label',
                          text:'Survey Title - ',
                          cls: 'labelBig',
                          width: 85
                      },{
                          border: false,
                          xtype:'label',
                          text:'Popular Radio Station',
                          cls: 'labelBigBold',
                      }]      
                  },{
                      border: false,
                      layout:{
                          type:'hbox',
                          align:'top'
                      },
                      items:[{
                          border: false,
                          xtype:'label',
                          text:'Category - ',
                          cls: 'labelBig',
                          width: 85
                      },{
                          border: false,
                          xtype:'label',
                          text:'Community',
                          cls: 'labelBigBold',
                      }]      
                  }]      
  
              },{
                  flex:1,
                  border: false,
                  cls: 'blueSurveyBox',
                  layout:{
                      type:'hbox',
                      align:'top',
                      pack:'center'
                  },
                  items:[{
                      flex:1,
                      border: false,
                      layout:{
                          type:'hbox',
                          padding:'10 10 15 10'
                      },
                      defaults:{margin:'0 10 0 0'},
                      items:[{
                          border:false,
                          layout:{
                              type:'vbox'
                          },
                          items:[{
                              xtype:'label',
                              text:'Your Logo - '
                          },{
                              xtype:'label',
                              text:'(Dimensions - 100 x 100 px, File Type - .jpg,.gif,.png)',
                              cls: 'descText',
                              width:170
                          }]
                      },{
                          xtype:'button',
                          text:'Upload Logo',
                          scale: 'medium',
                          iconCls:'icon-uploadBtn',
                          width: 120
                      },{
                          xtype:'image',
                          src: 'images/admin_users.png',
                          autoEl: 'div',
                          renderTo: Ext.getBody(),
                          width: 120
                      }]
                  }]
              }]
          },{
              border:false,
              margin:'0 10 10 10',
              cls: 'blueSurveyBox',
              layout:{
                  type:'vbox',
                  align:'stretch',
                  padding:'10 10 0 10'
              },
              items:[{
                      xtype:'label',
                      text:'Survey Layout Template',
                      cls:'subTitle'
              },{
                  xtype:'panel',
                  autoScroll: true,
                  items:[{
                  border:false,
                  layout:{
                      type:'hbox'
                  },
                  items:[{
                      xtype: 'dataview',
                      store: 'SearchedGraphics',
                      tpl: [
                          '&lt;tpl for="."&gt;',
                              '&lt;div class="thumb-wrap" id="{name:stripTags}"&gt;',
                              '&lt;div class="thumb"&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img class="img" src="{url}" title="{name:htmlEncode}"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;',
                              '&lt;span class="x-editable"&gt;{shortName:htmlEncode}&lt;/span&gt;',
                              '&lt;/div&gt;',
                          '&lt;/tpl&gt;',
                          '&lt;div class="x-clear"&gt;&lt;/div&gt;'
                      ],
                      multiSelect: true,
                      height: 100,
                      trackOver: true,
                      overItemCls: 'x-item-over',
                      itemSelector: 'div.thumb-wrap',
                      emptyText: ORT.Utility.GridEmptyText,
  
                      prepareData: function(data) {
                          Ext.apply(data, {
                              shortName: Ext.util.Format.ellipsis(data.name, 15),
                              sizeString: Ext.util.Format.fileSize(data.size),
                              dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
                          });
                          return data;
                      }}]
                  }]
              }]
          },{
              border: false,
              margin:'0 10 10 10',
              cls: 'blueSurveyBox',
              layout:{
                  type:'vbox',
                  align: 'stretch',
                  padding:'10 10 0 10'
              },
              defaults:{margins:'0 5 10 5'},
              items:[{
                  border: false,
                  layout:{
                      type:'vbox',
                      align:'top'
                  },
                  items:[{
                      xtype:'label',
                      text:'Survey Header Attributes',
                      cls:'subTitle'
                  },{
                      border: false,
                      layout:{
                          type:'hbox',
                          align:'top',
                          pack:'center'
                      },
                      defaults:{margins:'5 10 10 0'},
                      items:[{
                          xtype:'textfield',
                          fieldLabel:'Title',
                          name: 'title',
                          labelWidth: 60,
                          width:250
                      },{
                          xtype:'checkbox',
                          boxLabel:'Display Date/Time',
                          boxLabelAlign:'before',
                          margin:'0 0 0 20'
                      },{
                          xtype:'combobox',
                          width:100
                      }]
                  },{
                      border:false,
                      layout:{
                          type:'hbox',
                          align:'top' 
                      },
                      defaults:{margins:'0 20 0 0'},
                      items:[{
                          xtype:'combobox',
                          fieldLabel:'Font',
                          labelWidth:60,
                          width:250,
                      },{
                          border: false,
                          layout:{
                              type:'hbox',
                              align:'top',
                              pack:'end'      
                          },
                          defaults:{margin:'0 5 5 10'},
                          items:[{
                              xtype:'combobox',
                              fieldLabel:'Font Size',
                              labelWidth:80,
                              width:200
                          },{
                              xtype:'combobox',
                              fieldLabel:'Text Color',
                              labelWidth:80,
                              width:200
                          }]
                      }]
                  }]
              },{
                  border: false,
                  margin: '5 0 5 0',
                  layout:{
                      type:'vbox',
                      align:'top'
                  },
                  items:[{
                      xtype:'label',
                      text:'Survey Question Attributes',
                      cls:'subTitle'
                  },{
                      border: false,
                      layout:{
                          type:'hbox',
                          align:'top',
                          padding:'5 0 0 0'
                      },
                      defaults:{margins:'0 20 0 0'},
                      items:[{
                          xtype:'combobox',
                          fieldLabel:'Font',
                          labelWidth:60,
                          width:250,
                      },{
                          border: false,
                          layout:{
                              type:'hbox',
                              align:'top',
                              pack:'end'      
                          },
                          defaults:{margin:'0 5 0 10'},
                          items:[{
                              xtype:'combobox',
                              fieldLabel:'Font Size',
                              labelWidth:80,
                              width:200
                          },{
                              xtype:'combobox',
                              fieldLabel:'Text Color',
                              labelWidth:80,
                              width:200
                          }]
                      }]
                  }]
              },{
                  border: false,
                  layout:{
                      type:'vbox',
                      align:'stretch'
                  },
                  items:[{
                      xtype:'label',
                      text:'Survey Answers Attributes',
                      cls:'subTitle'
                  },{
                      border: false,
                      layout:{
                          type:'hbox',
                          align:'top',
                          padding:'5 0 0 0'
                      },
                      defaults:{margins:'0 20 0 0'},
                      items:[{
                          xtype:'combobox',
                          fieldLabel:'Font',
                          labelWidth:60,
                          width:250,
                      },{
                          border: false,
                          layout:{
                              type:'hbox',
                              align:'top',
                              pack:'end'      
                          },
                          defaults:{margin:'0 5 0 10'},
                          items:[{
                              xtype:'combobox',
                              fieldLabel:'Font Size',
                              labelWidth:80,
                              width:200
                          },{
                              xtype:'combobox',
                              fieldLabel:'Text Color',
                              labelWidth:80,
                              width:200
                          }]
                      }]
                  }]
              }]
          }]
      }]
  
  }],
  
  initComponent: function() {
      this.callParent(arguments);
  },
  constructor: function (config) {
      this.superclass.constructor.call(this, config);
  }});
  </code></pre>