`
fbchen
  • 浏览: 4742 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

ExtJs2.2实现的日期时间控件

阅读更多
/**
 * 日期时间输入框,实则是由日期输入框+时间输入框组成。
 * @class Ext.form.DateTimeFieldUx
 * @extends Ext.form.Field
 * @author fbchen 陈富冰
 * @version 1.0 2011-07-21
 * 需要引用相关的文件:<pre>
 * <script type="text/javascript" src="<%=request.getContextPath()%>/ext/ux/Ext.form.DateTimeFieldUx.js"></script>
 * </pre>
 */
Ext.form.DateTimeFieldUx = Ext.extend(Ext.form.Field, {
    datetimeFormat: '{date} {time}',
    dateFormat: 'Y-m-d',
    timeFormat: 'H:i:s',
    
    dataField: null,
    timeField: null,
    
    // private
    initComponent : function() {
        Ext.form.DateTimeFieldUx.superclass.initComponent.call(this);
        
        this.defaultProps = ['allowBlank', 'blankText', 'disabled', 'readOnly', 'disabledClass',
            'emptyClass', 'emptyText', 'fieldClass', 'focusClass', 'invalidClass', 'overCls'];
            
        this.fieldTpl = new Ext.Template(
            '<table border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed"><tbody><tr>',
            '<td nowarp="" width="50%" class="ux-dt-field"></td>',
            '<td nowarp="" width="50%" class="ux-dt-field"></td>',
            '</tr></tbody></table>'
        );
        
        this.dataField = this.dataField||{};
        this.timeField = this.timeField||{};
        if (this.dateFormat != null) {
            this.dataField.format = this.dateFormat;
        }
        if (this.timeFormat != null) {
            this.timeField.format = this.timeFormat;
        }
        this.applyDefaults(this.dataField, this.defaultProps);
        this.applyDefaults(this.timeField, this.defaultProps);
        
        Ext.apply(this.dataField, {
            hideLabel: true,
            anchor: '100%',
            value: this.dataValue
        });
        Ext.apply(this.timeField, {
            hideLabel: true,
            anchor: '100%',
            increment: 60,
            value: this.timeValue
        });
    },
    
    // private
    onRender : function(ct, position) {
        Ext.form.DateTimeFieldUx.superclass.onRender.call(this, ct, position);
        this.el.addClass('x-hidden');
        this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
        
        this.tb = this.fieldTpl.append(this.wrap, {}, true);
        this.td1 = this.tb.child('TD.ux-dt-field:nth(1)');
        this.td2 = this.tb.child('TD.ux-dt-field:nth(2)');
        
        var w = this.wrap.getWidth();
        this.tb.setWidth(w);
        this.datefield = new Ext.form.DateField(this.dataField).render(this.td1);
        this.timefield = new Ext.form.TimeField(this.timeField).render(this.td2);
        
        // prevent input submission
        this.datefield.el.dom.removeAttribute('name');
        this.timefield.el.dom.removeAttribute('name');
        
        this.datefield.afterMethod('setValue', this.updateValue, this);
        this.timefield.afterMethod('setValue', this.updateValue, this);
    },
    
    /**
     * 设置默认值
     * @param {Object} target
     * @param {Array} props
     */
    applyDefaults: function(target, props) {
        var o = {};
        Ext.each(props, function(p){
            if (Ext.type(this[p]) != false) {
                o[p] = this[p];
            }
        }, this);
        Ext.apply(target, o);
    },
    
    // private - Subclasses should provide the validation implementation by overriding this
    validateValue : function(value) {
        if (!Ext.form.DateTimeFieldUx.superclass.validateValue.call(this, value)) {
            return false;
        }
        /*if (value != null) {
            var format = this.getDateTimeFormat();
            if (!Date.parseDate(value, format)) {
                this.markInvalid();
                return false;
            }
        }*/
        return true;
    },
    
    validate : function(){
        if (!this.datefield.validate()) {
            return false;
        }
        if (!this.timefield.validate()) {
            return false;
        }
        return Ext.form.DateTimeFieldUx.superclass.validate.call(this);
    },

    onDestroy : function() {
        if (this.datefield) {
            this.datefield.destroy();
        }
        if (this.timefield) {
            this.timefield.destroy();
        }
        Ext.form.DateTimeFieldUx.superclass.onDestroy.call(this);
    },
    
    getDateTimeFormat: function() {
        return new Ext.Template(this.datetimeFormat).apply({
            date: this.datefield.format, time: this.timefield.format
        });
    },
    
    getDateTimeValue: function(dateValue, timeValue) {
        return new Ext.Template(this.datetimeFormat).apply({
            date: dateValue||'', time: timeValue||''
        }).trim();
    },

    updateValue: function(field, newValue, oldValue) {
        if (this.isValid()) {
            this.el.dom.value = this.getRawValue();
        }
    },
    
    initValue: function() {
        Ext.form.DateTimeFieldUx.superclass.initValue.call(this);
        this.originalValue = this.getValue();
    },
    
    getRawValue : function(){
        var dvalue = this.datefield.rendered ? this.datefield.getRawValue() : '';
        var tvalue = this.timefield.rendered ? this.timefield.getRawValue() : '';
        if (dvalue == '' && tvalue == '') {
            return '';
        }
        return this.getDateTimeValue(dvalue, tvalue);
    },

    /**
     * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
     * @param {Mixed} value The value to set
     * @return {Mixed} value The field value that is set
     */
    setRawValue : function(v){
        if (v === null || v === undefined) {
            this.datefield.el.dom.value = '';
            this.timefield.el.dom.value = '';
            return this.el.dom.value = '';
        }
        var format = this.getDateTimeFormat();
        var d = Ext.isDate(v) ? v : Date.parseDate(v, format);
        if (d) {
            this.datefield.el.dom.value = d.format(this.datefield.format);
            this.timefield.el.dom.value = d.format(this.timefield.format);
        } else {
            this.datefield.setValue(v);
            this.timefield.setValue(v);
        }
        return this.el.dom.value = (d === null || d === undefined ? v : d.format(format));
    },
    
    /**
     * Returns the currently selected field value or empty string if no value is set.
     * @return {String} value The selected value
     */
    getValue : function(){
        var format = this.getDateTimeFormat();
        if(!this.datefield.rendered) {
            if (this.value != null && this.value != undefined) {
                return Date.parseDate(this.value, format);
            } else {
                var v = this.getDateTimeValue(this.dateValue, this.timeValue);
                return Date.parseDate(v, format);
            }
        }
        var dvalue = this.datefield.getRawValue();
        var tvalue = this.timefield.getRawValue();
        var v = this.getDateTimeValue(dvalue, tvalue);
        return Date.parseDate(v, format);
    },
    
    setValue : function(value) {
        if (value != null && Ext.isDate(value)) {
            var format = this.getDateTimeFormat();
            value = Date.parseDate(value, format);
        }
        this.setRawValue(value);
    },
    
    /**
     * Resets the current field value to the originally-loaded value and clears any validation messages.
     */
    reset : function(){
        this.datefield.reset();
        this.timefield.reset();
        Ext.form.DateTimeFieldUx.superclass.reset.call(this);
    },
    
    // private
    onResize : function(w, h){
        Ext.form.DateTimeFieldUx.superclass.onResize.call(this, w, h);
        this.wrap.setWidth(w);
        this.tb.setStyle({'width': w});
        this.datefield.setWidth(this.td1.getWidth());
        this.timefield.setWidth(this.td2.getWidth());
    }
    
});
Ext.reg('datetimefield', Ext.form.DateTimeFieldUx);


使用方式:
<script type="text/javascript" defer="defer">
Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        }, {
            fieldLabel: 'Date Time',
            name: 'datetime1',
            xtype:'datetimefield'
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);
});
</script>
  • 大小: 5.9 KB
分享到:
评论

相关推荐

    [上传下载]ExtJS 2.2 开源网络硬盘系统_dogdisk.zip

    - 文件上传:在dogdisk应用中,可能使用了ExtJS的表单组件配合FileField控件实现文件选择和上传功能,同时利用AJAX进行后台处理,提供进度反馈。 - 文件下载:通过构建链接或者提供下载按钮,利用服务器端生成的...

    extjs 2.2

    综上所述,ExtJS 2.2是一个功能强大且成熟的JavaScript框架,它通过组件化开发和丰富的UI控件,极大地提升了Web应用的用户体验和开发效率。尽管现在有更现代的版本(如ExtJS 7.x),但2.2版本仍然在许多项目中被使用...

    extjs 2.2 api 安装版

    ExtJS 2.2 API 安装版是一个用于前端开发的JavaScript库,它提供了一套丰富的用户界面组件和强大的应用程序框架。这个版本是专为开发者设计的,方便他们离线使用和查阅API文档,无需持续连接到网络。下面将详细介绍...

    ExtJS2.2 图书管理系统

    ExtJS2.2 图书管理系统是一款基于Web的图书管理应用程序,它利用了强大的JavaScript框架ExtJS2.2,配合后端的Java技术和MySQL5.0数据库来实现高效的数据存储和检索。这个系统对于初学者来说,是一个很好的学习平台,...

    基于Ext2的日历控件和IP地址输入控件

    EXTJS 2.2中的日历控件可能需要开发者手动编写一些额外的代码来实现日历视图的布局和交互,包括切换月份、添加事件等功能。开发者需要理解EXTJS的事件监听机制和数据绑定概念,以便将用户的选择与后端数据进行同步。...

    ext-2.2.rar

    4. **表格控件**:ExtJS 2.2的GridPanel提供了强大的表格功能,包括排序、分页、行编辑、列拖放等,是处理大量数据的理想选择。 5. **表单元素**:表单组件是ExtJS的重要部分,包括文本框、下拉框、复选框、日期...

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

    最后利用一个商品信息管理系统和一个企业任务管理系统,向读者演示了ExtJS在实际项目中的应用以及实现流程。  《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以...

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...

    ExtJS6学习资料

    - **组件多样性**:ExtJS 提供了大量的 UI 组件,包括但不限于数据网格(datagrid)、选项卡面板(tab panels)、树状控件(tree controls)、日期选择器等。 - **应用场景**:这些组件特别适用于构建复杂的数据展示...

    extjs的spinner

    通过自定义 `Spinner` 类和其方法,我们可以实现更加灵活和功能丰富的控件。同时,通过对 `Spinner` 的不同配置,可以满足不同场景的需求,如数值选择、日期选择和时间选择等。希望这些知识点能够帮助你在实际开发...

    extjs的教程里面含有代码列子详解

    - **简化开发过程**:EXTJS提供了一系列控件,如表格、树形结构、布局等,这些控件不仅外观精美,而且极大地提高了开发效率。 #### 学习资源的重要性 由于EXTJS的文档资料相对较少,尤其是中文资料稀缺,这使得...

    ExtJs xtype一览

    - **`timefield` (Ext.form.TimeField)**: 时间录入项组件,用于输入时间值。 - **`field` (Ext.form.Field)**: 表单字段组件,是所有表单元素的基类。 - **`fieldset` (Ext.form.FieldSet)**: 表单字段组组件,用于...

    ExtJS实用开发手册-快速入门

    ##### 2.2 应用ExtJS 当ExtJS库文件和页面内容加载完成后,ExtJS会自动执行`Ext.onReady`中指定的函数。因此,大多数ExtJS应用都是从`Ext.onReady`开始的。这是一个简单的示例: ```javascript Ext.onReady...

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

    最后利用一个商品信息管理系统和一个企业任务管理系统,向读者演示了ExtJS在实际项目中的应用以及实现流程。  《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以...

    Extjs中文教程2.x

    **2.2 Extjs 命名空间的定义** - **作用**: 用于组织和管理代码,避免全局变量污染。 - **示例**: `Ext.namespace('MyApp.view', 'MyApp.model')` 定义了两个命名空间。 **2.3 Extjs OOP 特性** - **继承**: 通过...

    Extjs xtype集合

    - **描述**: 显示状态信息的状态栏,版本2.2加入后,在3.0版本中被移除。 8. **`colorpalette`:** - **`xtype`**: `colorpalette` - **`Class`**: `Ext.ColorPalette` - **描述**: 一个允许用户选择颜色的颜色...

    老师整理的extjs学习笔记

    - **Utilities (工具)**: 包括一系列辅助函数和工具类,如日期处理、动画效果等。 ##### 如何引用 为了在项目中使用 ExtJS,需要在 HTML 文件中通过 `&lt;script&gt;` 标签引入相应的 JS 文件。可以通过以下方式下载最新...

    掏钱学Ext(完整版) 附全部源码

    2.6.2. 全选checkbox的时间了,请允许我让2.0先上场。 2.6.3. 1.x时代的全选checkbox。 2.7. 还差:表头菜单,分页,可编辑表格,去服务器读取数据,改变大小,表格间拖拽,树与表格间拖拽。 3. 歌颂吧!只为了...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -优化Tree控件的AJAX实现。 +为页面的Form添加autocomplete="off"属性。 -参考http://www.cnblogs.com/sanshi/archive/2009/09/04/1560146.html#1635830 +添加对extjs3.0中所有语言的支持。 -ExtAspNet扩展的...

    Jxstar系统管理手册V2.0.pdf

    这些界面控件基于ExtJs框架开发,保证了界面的规范性和性能。系统的所有功能页面均采用静态JS处理,有效降低了服务器的负担,同时提高了软件开发效率,规范了应用系统软件的界面,增强了系统的易用性。 1.2 基础...

Global site tag (gtag.js) - Google Analytics