extjs 如何重置EXT日期字段

w8ntj3qf  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(226)

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

此处为ext代码

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

pbpqsu0x1#

添加一个监听器到你的日期字段。使用一个选择监听器而不是一个改变监听器,因为改变事件只在模糊上激发。或者你可以这样做

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

gdrx4gfi

gdrx4gfi2#

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

相关问题