EXTJS项目实战经验总结一：日期组件的change事件：

1  依据选择的日期，加载相应的列表数据，如图：

 

开发说明

   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这个私有监听器属性，封装类如下：

1. Ext.form.CustomDateField = Ext.extend(Ext.form.DateField,  {
2. // private
3. readOnly: true,
4. setValueFn:null,
5. menuListeners : {
6. select: function(m, d){
7. this.setValue(d);
8. if(this.setValueFn)
9. this.setValueFn.call(this,this.formatDate(this.parseDate(d)));
10. },
11. show : function(){
12. this.onFocus();
13. },
14. hide : function(){
15. this.focus.defer(10, this);
16. var ml = this.menuListeners;
17. this.menu.un("select", ml.select,  this);
18. this.menu.un("show", ml.show,  this);
19. this.menu.un("hide", ml.hide,  this);
20. }
21. }
22. });
23. Ext.reg('customDateField', Ext.form.CustomDateField);

1. Ext.form.CustomDateField = Ext.extend(Ext.form.DateField,  {
2. // private
3. readOnly: true,
4. setValueFn:null,
5. menuListeners : {
6. select: function(m, d){
7. this.setValue(d);
8. if(this.setValueFn)
9. this.setValueFn.call(this,this.formatDate(this.parseDate(d)));
10. },
11. show : function(){
12. this.onFocus();
13. },
14. hide : function(){
15. this.focus.defer(10, this);
16. var ml = this.menuListeners;
17. this.menu.un("select", ml.select,  this);
18. this.menu.un("show", ml.show,  this);
19. this.menu.un("hide", ml.hide,  this);
20. }
21. }
22. });
23. Ext.reg('customDateField', Ext.form.CustomDateField);

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

例：

1. {
2. fieldLabel : '计划开始日期',
3. vtype : 'isBlank',
4. xtype : 'datefield',
5. xtype : 'customDateField',
6. setValueFn:function(value){
7. alert(value);
8. },
9. format : 'Y-m-d'
10. }

1. {
2. fieldLabel : '计划开始日期',
3. vtype : 'isBlank',
4. xtype : 'datefield',
5. xtype : 'customDateField',
6. setValueFn:function(value){
7. alert(value);
8. },
9. format : 'Y-m-d'
10. }

这种方法不好的地方，就是覆盖了extjs提供的私有属性menuListeners，不知路过的朋友，有没有比较好的解决办法