如何重置 EXT 日期字段

Question

我使用两个日期字段作为开始和结束日期来选择日期范围，将这些日期字段呈现在两个单独的 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');

Answer 1

为您的日期字段添加一个监听器。使用选择侦听器而不是更改侦听器，因为更改事件仅在模糊时触发。或者你可以这样做

 dateFrom.addValueChangeHandler(new ValueChangeHandler<Date>() {
    @Override
    public void onValueChange(ValueChangeEvent<Date> event) {
         ...
    }
 });

要清除，您可以使用类似的东西 - 根据您的需要分叉

{
    xtype: 'datefield',
    onTriggerClick: function() {
        Ext.form.DateField.prototype.onTriggerClick.apply(this, arguments);
        var btn = new Ext.Button({
            text: 'Clear'
        });
        btn.render(this.menu.picker.todayBtn.container);
    }
}

source

Answer 2

onTriggerClick: function() {
    Ext.form.DateField.prototype.onTriggerClick.apply(this, arguments);
    if(!this.hasOwnProperty('btnClear')) {
        var self = this;
        this.btnClear = new Ext.Button({
            text: _('reset'),
            listeners:{
                click: function() {
                    console.log(self)
                    self.reset()
                    self.fireEvent('select')
                }
            }
        });
        this.btnClear.render(this.menu.picker.todayBtn.container);
    }
}