`

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

    **Ext.form.DateField** 是一个日期选择器,继承自 **Ext.form.TriggerField**,专门用于日期的选择和输入。 - **altFormats**: 类型为 `String`,定义用于解析用户输入的其他日期格式,默认为 `'m/d/Y|m-d-y|m-d-Y...

    EXT.form组件

    `Ext.form.TriggerField`的`triggerClass`允许你自定义触发按钮的样式,而`Ext.form.DateField`则可以通过`altFormats`来定义不同的日期输入格式。 EXT.form组件的事件处理也很重要,例如`Ext.form.TriggerField`的...

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

    在`Ext`中,`dateField`通常通过创建`Ext.form.field.Date`类的实例来实现。它包括一个内置的日历控件,用户可以通过这个控件方便地选择日期。默认情况下,用户可以输入或选择完整的日期(年、月、日)。然而,通过...

    ExtJs 带清空功能的日期组件

    DateField是Ext.form.field.Date的实例,它继承自Ext.form.field.Text。DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期...

    Ext Extjs 禁止文本和日期编辑

    本文将详细探讨如何在Ext JS中实现禁止文本字段和日期选择器的编辑。 首先,让我们来看一下`TextField`组件。`TextField`是Ext JS中用于创建单行文本输入的常见控件。如果你想要在某个时刻禁止用户编辑这个字段,你...

    Ext DateField控件 - 只选择年月

    1. **类定义**:创建一个新的DateField子类,可能命名为`MonthPicker`,继承自Ext.form.field.DateField。 2. **配置项**:定义新的配置选项,如`allowOnlyMonthYear`,用于开启只选择年月模式。 3. **模板修改**:...

    Ext DateField控件 - 只选择年月插件

    Ext DateField控件是Ext JS库中的一个组件,主要用于处理日期相关的输入。在Web应用程序中,用户经常需要输入或选择日期,DateField控件提供了一个交互式的界面来完成这一任务。然而,有时我们可能只需要用户选择...

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

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

    Ext组件描述,各个组件含义

    **2.19 Date Field (Ext.form.DateField)** - **xtype**: `datefield` - **功能描述**:Date Field 是一个用于输入日期的文本框。 - **主要用途**:适用于需要用户输入日期的场景。 **2.20 Field (Ext.form.Field)...

    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_表单提交_数据校验

    `Ext.form.DateField`提供了日期选择功能,同时具备强大的校验机制。通过`format`参数,可以自定义日期的显示格式,如`'y-m-d'`。`disabledDays`参数允许禁用某些日期,如周末或其他特定日期,以满足特定业务规则。...

    extJs xtype 类型

    4. **`datefield`:** 日期选择项组件,用于让用户选择日期,通过`Ext.form.DateField`类实现。 5. **`timefield`:** 时间录入项组件,用于让用户输入时间,通过`Ext.form.TimeField`类实现。 6. **`field`:** 表单...

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

    EXT from培训教材

    2. **日期字段**:使用`Ext.form.DateField`创建,用于选择日期。例如: ```javascript new Ext.form.DateField({ fieldLabel: 'Hire Date', name: 'hire_date', width: 90, allowBlank: false, // 不允许为空 ...

    ExtJs_xtype一览

    - `datefield`:`Ext.form.DateField`,日期选择输入框。 - `timefield`:`Ext.form.TimeField`,时间输入框。 - `field`:`Ext.form.Field`,表单的基础字段。 - `fieldset`:`Ext.form.FieldSet`,用于组织...

    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帮助文档pdf版

    - `Ext.EventObject.stopEvent()`: 同时阻止默认行为和事件冒泡。 #### 13. Ext.CompositeElement 类 (P.16) - **概述**:提供了操作一组DOM元素的方法。 - **常用方法**: - `Ext.CompositeElement.add(elements...

    ext日期控件时分秒

    然而,标准的EXT JS日期字段(DateTimeField)默认仅支持日和月的选择,不包含时间部分,即小时、分钟和秒。为了解决这个问题,开发者通常需要寻找或创建自定义扩展来增加对时分秒选择的支持。 EXT JS的日期控件...

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

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

    Extjs fieldset两行两列布局

    ### Extjs FieldSet 两行两列布局解析 ...以上代码展示了如何在Extjs中实现一个两行两列的`FieldSet`布局,并对各个组成部分进行了详细的解析。这种布局方法灵活且强大,适用于多种复杂的UI设计需求。

Global site tag (gtag.js) - Google Analytics