扩展Ext.form.DateField实现定义日期面板默认展示日期

原文地址： http://www.cnitblog.com/yemoo/archive/2008/07/10/46530.html

 

用了这么久的EXT，感觉Ext的功能是很全很强了，但任何东西都不能涵盖所有的需求，好在Ext为我们提供了书写扩展的接口，通过做一些扩展便可轻松是Ext组件满足我们的特殊需求。

Ext的date组件就不能满足我们这么一个需求：我们希望当日期框内容为空时，我们点击日期输入框后面的图标显示日期选择面板时，展示的默认日期不是当前日期的年月，而是我们自己设定的一个默认日期。

查看Ext.form.DateField的属性列表没有看到提供这么一个参数可以让我们设置默认展示日期。

因此这就需要我们自己去扩展下了。查看了Ext.form.DateField的onTriggerClick方法，发现面板的默认日期是在这里设定的。
Ext设定的是this.getValue() || new Date()，也就是先取输入框的值，如果不存在则使用当前日期。

ok，来扩展吧，我们自己再setValue一下就可以了。

代码如下：

  Ext.form.myDateField = Ext.extend(Ext.form.DateField,{
            onTriggerClick: function (){
                Ext.form.myDateField.superclass.onTriggerClick.call( this );    // 先执行一下父类的函数内容，否则下面的this.menu找不到
                 this .menu.picker.setValue( this .getValue() || this .defaultDate);      // 调用menuPicker的setValue方法设定一下值
            }
        });
        Ext.reg('myDateField',Ext.form.myDateField);   // 注册一个类型，便于使用
         // 使用我们自己扩展myDateField，直接new一个对象
         var  date = new  Ext.form.myDateField({
            renderTo:document.body,
            defaultDate: new  Date( 2008 , 7 , 8 )     // 这个defaultDate就是我们扩展的一个属性
        });
         // 通过xtype引用
         var  panel = new  Ext.Panel({
            width: 200 ,
            height: 200 ,
            items:{
                xtype:'myDateField',    // 通过我们注册的xtype来引用
                defaultDate: new  Date( 2008 , 7 , 8 )
            },
            renderTo:document.body
        });

看看代码注释大家一定都能明白，几行代码就搞定了。
再此感叹！Ext真强！