extjs - EXT日付フィールドをリセットする方法

Question

開始日と終了日として 2 つの日付フィールドを使用して日付範囲を選択し、これらの日付フィールドを 2 つの個別の div にレンダリングしました。問題は、リセットボタンを押すと日付フィールドがリセットされますが、カレンダーコンポーネントはリセットされず、ページを更新するまで選択された日付範囲外のすべての日付が無効になることです:

ここにhtmlがあります

<table cellspacing="6" align="center" border="0">           
<tr>
  <td><b>Report Period:</b> </td>
<td><div id="fromDateRange"></div></td>         
<td><div id="toDateRange"></div></td>
<td><input type="button" value="Search"/></td>
<td><input type="reset" value="Reset"/></td>
</tr>
</table>

ここに拡張コード

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');