扩展Ext.form.DateField实现定义日期面板默认展示日期
2013-03-25 11:40
309 查看
原文地址: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真强!
用了这么久的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真强!
相关文章推荐
- 扩展Ext.form.DateField实现定义日期面板默认展示日期
- Ext_日期选择框_Ext.form.DateField
- Ext.form.DateField简单用法及日期范围控制
- Ext.form.DateField简单用法及日期范围控制
- 扩展Ext的DateFIeld,实现月、周、天的输入
- Ext.form.DateField简单用法及日期范围控制
- ExtJs内的Ext.form.Panel中datefield控件选择日期过后的事件监听select以及比较两个时间的大小
- Ext.form.DateField简单用法及日期范围控制
- Ext_日期选择框_Ext.form.DateField(转)
- EXT.NET CalendarPanel(日历面板) 每个日期任务提示功能实现
- JQuery扩展方法实现Form表单与Json互相转换
- CSS Ext中FormPanel面板及Form控件横排测试(CSS)
- (随记八)Android设计模式解析与实战_自由扩展项目_Builder模式_定义与简单实现
- 修改Ext.DatePicker使得Ext.form.DateField只选择年月
- 修改Ext.form.DateField只选择年月
- 一个产生随机数字 字符串验证码 日期的类扩展实现
- 用My97扩展ExtJs日期时间插件 (EXT不支持时分秒,我们借助my97完成需求)
- Ext.form.DisplayField扩展组件:在formpanel中显示html格式的内容
- 利用润乾时间日期函数实现日期扩展功能
- 号)、sex(性别)、birthday(出生日期)、id(身份证号)等等。其中“出生日期”定义为一个“日期”类内嵌子对象。用成员函数实现对人员信息的录入和显示。要求包括:构造函数和析构函数、拷贝构造函