title: Extjs Date picker display issue
body: <p>I wrote code of ExtJS for date picker, and include it in two different HTML file. Height of text box is different in the first HTML file than in the other. My code is :</p>
  
  <pre><code>Ext.create('Ext.form.Panel', {
      height: '15%',
      width: $("#MainWindow_Right_Panel").width() - 20,
      renderTo: 'FilterControl',
      id: 'DatePicker_Panel',
      border: 0,
      items: [
          {
              xtype: 'datefield',
              fieldLabel: 'To',
              name: 'to_date',
              style: 'float: right',
              id: 'todate',
              padding: 5,
              width: 130,
              labelWidth: 30,
              value: todate,
              maxValue: today,
              format: "d.m.Y",
              layout: 'form',
              listeners: {
                  select: function(combo, value) {
                       todate=value;
  
                  }
              }
          },
          {
              xtype: 'datefield',
              fieldLabel: 'From',
              style: 'float: right',
              labelWidth: 50,
              width: 150,
              name: '_fromdate',
              padding: 5,
              id: 'fromdate',
              value:fromdate,
              maxValue: today,
              format: "d.m.Y",
              layout: 'form',
              listeners: {
                  select: function(combo, value) {
                     fromdate=value;
                  }
              }
  
          },
      ]
  });
  </code></pre>
  
  <p>output in first HTML:</p>
  
  <p><img src="https://i.stack.imgur.com/C0SDo.png" alt="enter image description here"></p>
  
  <p>in the second: </p>
  
  <p><img src="https://i.stack.imgur.com/6nrkX.png" alt="enter image description here"></p>