Extjs之DateField控件的鼠标点击选取事件监控

Ext用的比较多的同志会发现一个问题，Extjs的DateField并没有提供'select'事件。而在我们的实际开发过程中，经常会需要去监控它，并进行后续的处理。在逼不得已的情况下，我们会用'change'时间去替代，但是该事件必须要datefield控件失去焦点时才触发，也就是说，需要用户选了日期之后，再在空白的地方点击一下鼠标才会触发值的改变事件。——这是无疑是非常别扭的。
     通过研究DateField的源代码我们可以发现：

       

<span style="font-size:14px;"> onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateMenu();
}
Ext.apply(this.menu.picker,  {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.ddMatch,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
},</span>

在点击日期控件的右边按钮的时候，会给Date添加一个‘日期目录’面板，该面板就是我们进行日期选择时候的操作对象。 

  而 我们鼠标选择日期的时候，必然会触发menu的'select'事件，所以，我们只需要在menu上注册'select'事件处理函数，就能达到目的了。 

示例如下：

<span style="font-size:14px;"> var myDate = new Ext.form.DateField({
format : 'Y-m-d',
editable:false,
menu:new Ext.menu.DateMenu()          //必须自己添加日期目录面板，否则在点击时间按钮时才会创建，导致无法在外面注册事件
});
myDate.menu.on('select',function(picker,date){
//此处书写你的处理逻辑。
});   </span>