title: ExtJs Date Picker display problem 3.1.0 with Ext.form.DateField
body: <p>I am new to ExtJs and have issues with the display of the date picker.
  The actual date picker functionality works, but first 2 columns overlaps as per picture attached.</p>
  <p>I have added a date picker to a new Ext.FormPanel() and added panel to a window using ExtJs 3.1.0 as per code below:</p>
  <pre><code>function save(data) {
      var weekDay = [
                  ['1', 'Sunday'],
                  ['2', 'Monday'],
                  ['3', 'Tuesday'],
                  ['4', 'Wednesday'],
                  ['5', 'Thursday'],
                  ['6', 'Friday'],
                  ['6', 'Saturday']
                 ];
  
      var panel = new Ext.FormPanel({
          labelWidth: 125,
          frame:true,
          autoHeight   : true,
          title: 'Create',
          bodyStyle:'padding:5px 5px 0',
          width: 450,
          bodyPadding: 10,
          defaults: {width: 200},
          defaultType: 'textfield',
          items: [
             new Ext.form.ComboBox({
                   fieldLabel: 'Day of the Week (Optional)',
                   id: 'sDay',
                   store: weekDay,
                   typeAhead: true,
                   allowBlank: true,
                   editable: false,
                   selectOnFocus:true,
                   triggerAction: 'all',
                   emptyText:''
               }),
               new Ext.form.DateField({
                   fieldLabel: 'Date',
                   id: 'sDate',
                   format: 'd/m/Y',
                   allowBlank: true,
                   editable: false,
                   minValue: new Date(),
                   emptyText:'',
                   width: 300,
                   style: 'float: left',
                   cls: 'x-border-box, x-border-box',
                   padding: 5,
                   layout: 'form'
              })
          ],
  
          buttons: [{
              text: 'Save',
              handler: function() {
                  // do stuff
                    win.close();
                  }
  
              }
          },{
              text: 'Cancel',
              handler: function() {
                  win.close();
              }
          }]
      });
  
      var win = new Ext.Window({
              title      : 'Save stuff',
              width      : 550,
              autoHeight : true,
              modal      : true,
              border     : false,
              layout     : 'fit',
              items      : panel
          });
  
          win.show();
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ivenz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ivenz.jpg" alt="enter image description here" /></a></p>
  <p>I have tried other date format, increased the width, added cls etc
  But, no luck.
  Please, has anyone experienced this issue with ExtJs?</p>