用了这么久的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
});
分享到:
相关推荐
9.5.1 标签面板的构成及其运行流程:ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签面板的配置项、属性、方法和事件 / 462 9.5.3 使用标签页 / 463 9.5.4 可重用的标签页 / 465 9.6 视图与选择模型...
7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能...
7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能...
1. **ext-all.css** - 这个文件包含了 EXTJS 组件的所有默认样式。为了保持EXTJS的更新兼容性,不应直接修改此文件。如果需要自定义样式,应在页面中引入该样式表后,再覆盖所需的样式。 2. **ext-base.js** - 包含...
1. **扩展基类**:首先,我们需要通过`Ext.extend()`方法来扩展`Ext.form.field.DateTimeField`。 2. **定义配置项**:添加新的配置项,如`showSeconds`,允许用户开启或关闭秒的选择。 3. **重写`createPicker`方法...