Extjs DateField onchange

1 开发思路：在日期值变化的事件中获得选择后的日期值，传给后台，然后从后台加载相应的数据

2 问题：在查看extjs2.2 的api的官方说明文档，文档对datefield组件的change事件说明如下：

change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue ) Fires just before the field blurs if the field value has changed.

这句话是说值发生变化，并且在失去焦点之前触发此事件，也就是说如果此日期组件的值发生变化，而焦点并没有失去，这个事件也就不会触发。通过我们的程序验证，事实也的确如此。我们需要值发生变化就要触发相应的事件。

3 解决方法：

从源头找事件：是用户点击相应的日期，才导致文本框里的值发生变换。可以捕获这个点击选择事件，通过这个事件我们得到日期值，传给后台，加载列表数据

4 具体做法：

继承Ext.form.DateField，覆盖menuListeners这个私有监听器属性，封装类如下：

Ext.form.CustomDateField = Ext.extend(Ext.form.DateField,  {// privatereadOnly: true,setValueFn:null,menuListeners : {select: function(m, d){this.setValue(d);if(this.setValueFn)this.setValueFn.call(this,this.formatDate(this.parseDate(d)));},show : function(){this.onFocus();},hide : function(){this.focus.defer(10, this);var ml = this.menuListeners;this.menu.un("select", ml.select,  this);this.menu.un("show", ml.show,  this);this.menu.un("hide", ml.hide,  this);}}
});
Ext.reg('customDateField', Ext.form.CustomDateField);

5 使用这个自定义的组件：

{fieldLabel : '计划开始日期',vtype : 'isBlank',xtype : 'datefield',xtype : 'customDateField',setValueFn:function(value){alert(value);},format : 'Y-m-d'}

Extjs DateField onchange相关推荐

【转】ExtJS DateField 日期控件Format格式化
日期格式参考extjs api文档中的Date类型. var md = new Ext.form.DateField({ ............ format: 'Y-m-d H:i:s', ... ...
ExtJs计算两个DateField所间隔的月份（天数） new Date(str) IE游览器提示NaN 处理...
需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...
Extjs之DateField控件的鼠标点击选取事件监控
Ext用的比较多的同志会发现一个问题,Extjs的DateField并没有提供'select'事件.而在我们的实际开发过程中,经常会需要去监控它,并进行后续的处理.在逼不得已的情况下,我们会用'cha ...
extjs计算两个DateField所间隔的月份（天数）
需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...
extjs 获取日期控件的值_Extjs的datefield怎么获取当前系统时间所属月月初到月末...
匿名用户 1级 2016-10-14 回答日期控件: new Ext.form.DateField( { fieldLabel : '开始日期', id : 'beginDate', width : ...
extjs 月份选择控件_Ext DateField控件 - 只选择年月
效果 HTML代码: MonthPicker JavaScript代码: //MonthPickerPlugin.js文件,年月选择的关键代码 Ext.ux.MonthPickerPlugin = f ...
extjs中dateField日期精确到时分秒的扩展控件
这是一个在网上下载的控件,拿过来和大家分享一下,截图如下: [img]http://dl.iteye.com/upload/attachment/376371/0851bc2e-cebd-322b-b ...
ExtJS入门教程03，form中怎能没有validation
接上篇内容,我们在学会extjs form的基本用法之后,今天我们来看看extjs form的validation功能. 必填项,就是不能为空(allowBlank) 效果: 代码: {xtype: ...
Extjs Form用法详解（适用于Extjs5）
为什么80%的码农都做不了架构师?>>> Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Fo ...

Extjs DateField onchange

Extjs DateField onchange相关推荐

最新文章

热门文章