title: how to reset EXT datefield
body: <p>I have use two date fields as start and end date to select date range, render these date fields in two separate divs. problem is that when i press reset button date fields get reset but the calendar component is not reset and still disable all the dates outside of date range that was selected  until i refresh the page:</p>
  
  <p>here its a html</p>
  
  <pre><code>&lt;table cellspacing="6" align="center" border="0"&gt;           
  &lt;tr&gt;
    &lt;td&gt;&lt;b&gt;Report Period:&lt;/b&gt; &lt;/td&gt;
  &lt;td&gt;&lt;div id="fromDateRange"&gt;&lt;/div&gt;&lt;/td&gt;         
  &lt;td&gt;&lt;div id="toDateRange"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="button" value="Search"/&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="reset" value="Reset"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>here ext code</p>
  
  <pre><code>var drSt = new Ext.Panel({
   labelWidth: 30, 
   border: false,
   width: 100,
   layout: 'fit',
   defaults: {width: 125},
   defaultType: 'datefield',
   items: [{
   name: 'startdt',
   id: 'startdt',
   vtype: 'daterange',
   format: 'Y-m-d',
   endDateField: 'enddt' // id of the end date field
   }]
  });
  
  drSt.render('fromDateRange');
  
  var drET = new Ext.Panel({
      labelWidth: 30,
      border: false,
      width: 100,
      layout: 'fit',        
      defaults: {width: 125},
      defaultType: 'datefield',
      items: [{
        name: 'enddt',
        id: 'enddt',    
        vtype: 'daterange',
        format: 'Y-m-d',
        startDateField: 'startdt' // id of the start date field
      }]
    });
  
  drET.render('toDateRange');
  </code></pre>