`

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

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.form表单中各种属性应用详解

    1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField

    Ext扩展dateField时间控件,可以选择年月日、年月、年、月

    Ext扩展dateField时间控件,可以选择年月日、年月、年、月

    Ext Extjs 禁止文本和日期编辑

    Ext Extjs 禁止文本和日期编辑 ExtJS中动态设置TextField的readOnly属性

    Ext DateField控件 - 只选择年月

    NULL 博文链接:https://newlethe.iteye.com/blog/814634

    Ext-datatimefield日期与时间选择器精确至时分秒

    1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样,xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题

    ExtJs 带清空功能的日期组件

    ExtJs 的日期控件不带清空功能,项目有可能需要一个带清空功能的日期控件。

    EXT核心API详解

    53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....

    Ext Js权威指南(.zip.001

    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 视图与选择模型...

    ExtJS入门教程(超级详细)

    53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....

    Extjs学习笔记之三 extjs form更多的表单项

    可以通过如下代码新建一个日期选择框: 代码如下: new Ext.form.DateField({ id: ‘diliveryDate’, format: ‘Y年m月d日’, maxValue: new Date(), minValue: ‘1900-01-01’, disabledDays: [0, 6], ...

    Ext日期控件显示农历,及其周末高亮显示

    先有两种实现方式,一为重写Date.DatePicker和Ext.form.DateField控件的相应方法、另一种为单独做一个扩展扩建。 本JS文件在Ext3.1测试通过、若果要在高版本中使用,可参照例子重写相应源码的方法即可。

    精通JS脚本之ExtJS框架.part1.rar

    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 表格常用功能...

    EXT日期格式说明

    对EXT日期格式进行汇总说明!!!!!!!!!!!

    精通JS脚本之ExtJS框架.part2.rar

    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 表格常用功能...

    为EXT写的月份选择控件

    往往是需要修改源码的方法,如: 修改Ext.DatePicker使得Ext.form.DateField只选择年月 等,但是修改源码有个不好的地方,如果ext升级了,又需要改一次,很不方便.干脆,就重写了一个月份选择控件.使用接口和DateField类似,...

    extjs4.2日期控件datefield拓展加上选择时分秒功能

    在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用的选择日期时分秒的拓展控件,extjs版本是4.2,亲测能用,...

    Extjs中DisplayField的日期或者数字格式化扩展

    所以我们必须使用 Ext.form.DisplayField,但是 Ext.form.DisplayField 没有一个format的属性,也不具备 renderer 这个事件,比如日期字段 var form = new Ext.form.FormPanel({frame: true,renderTo: ‘form-div’,...

    解决datefield组件 日期选择框在IE8下显示不完整的问题

    extjs中,经常会用到datefield组件控制用户对日期的操作,比如日志管理,需要开始时间、结束时间,但是IE8下日期选择框会显示不全,解决方法参加代码。 同时改代码解决了开始时间、结束时间的时间范围控制的问题,即...

    Flex中DateField实现时分秒选择并添加确定按钮 DateChooser

    最近刚好用到DateField组件,却无奈的发现只能选择年月日,不支持时分秒,在晚上找了好多,有的勉强可以用,但是很不完善.对从网上拿到一份代码进行了改善,具体从哪里拿的也忘了,请原作者勿怪. 改善之后的功能: 1.可以...

    extjs DateField完全操作

    考虑到extjs DateField的关键配置和主要操作

Global site tag (gtag.js) - Google Analytics