扩展Ext.form.DateField实现定义日期面板默认展示日期
2009-11-04 21:16
302 查看
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的DateFIeld,实现月、周、天的输入
- Ext.form.DateField简单用法及日期范围控制
- Ext_日期选择框_Ext.form.DateField(转)
- Ext.form.DateField简单用法及日期范围控制
- ExtJs内的Ext.form.Panel中datefield控件选择日期过后的事件监听select以及比较两个时间的大小
- EXT.NET CalendarPanel(日历面板) 每个日期任务提示功能实现
- Ext_日期选择框_Ext.form.DateField
- Ext.form.DateField简单用法及日期范围控制
- Ext.form.DateField简单用法及日期范围控制
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Flex实现自定义中文日期选择(mx:DateField)
- 扩展entity framework core实现默认字符串长度,decimal精度,entity自动注册和配置
- Ext.form.Panel表单面板
- Extjs4中Form之日期选择器datefield
- Ext的form类型扩展(二)——AttachField
- Extjs4.x Vtype扩展实现开始日期小于结束日期
- ExtJS笔记--Ext.form.DateField
- Ext.form.ComboBox 本地和远程模式的基本定义
- Ext.form.DisplayField扩展组件:在formpanel中显示html格式的内容