关闭

Ext JS 6:将日期字段修改为日期时间字段(二)

标签: ext继承日期时间字段
941人阅读 评论(0) 收藏 举报
分类:

在上文《Ext JS 6:将日期字段修改为日期时间字段(一) 》(以下称文一)只是简单的利用日期选择字段的源代码创建了一个日期时间选择字段,而不是采用继承的方式,因而在本地化上,并不能很好的利用日期选择字段的本地化资源,需要自己考虑本地化的问题。为了解决这个问题,最好的方式当然是采用继承的方法来实现日期时间选择字段了。而本文就是用来讲述如何通过继承来实现这个的。

首先要做的是在测试环境创建一个名为Test.ux.picker.Datetime2的类,并添加以下定义代码:

Ext.define('Test.ux.picker.Datetime2', {
    extend: 'Ext.picker.Date',
    requires: [
        'Ext.form.field.Number'
    ],
    alias: 'widget.uxdatetimepicker2',
})

在代码中的extend表明类Datetime2将从Ext.picker.Date派生,别名为uxdatetimepicker2。

从Ext.picker.Date派生日期时间选择字段,主要就是把文一中修改的地方移植过来。首先要移植当然是模版了,因而需要把文一中的renderTpl属性的内容全部复制过来。接下来就是numberFieldDefaults属性的内容了。

接下来是beforeRender方法,在这里我们需要创建3个数字字段,全部复制过来没必要,因为调用callParent方法后,又会重新执行一次重复的代码,因而,在这里只需要保留创建3个数字字段的代码并调用callParent方法就行了,具体代码如下:

    beforeRender: function() {
        var me = this;



        me.hourField = new Ext.form.field.Number(Ext.apply({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            maxValue: 23,
            minValue: 0
        }, me.numberFieldDefaults));

        me.minuteField = new Ext.form.field.Number(Ext.apply({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            maxValue: 59,
            minValue: 0
        }, me.numberFieldDefaults));

        me.secondField = new Ext.form.field.Number(Ext.apply({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            maxValue: 59,
            minValue: 0
        }, me.numberFieldDefaults));


        me.callParent();


    },

对于getRefItems方法,通过callParent方法无法解决返回数组包含三个数字字段的问题,因而只好采用完全重写的方法,也就是将getRefItems方法全部复制过来。

对于doDestroy方法,可以通过callParent来解决原有组件的销毁,因而在这里只销毁3个数字字段就行,具体代码如下:

    doDestroy: function() {
        var me = this;

        if (me.rendered) {
            Ext.destroy(
                me.hourField,
                me.minuteField,
                me.secondField
            );
        }

        me.callParent(arguments);
    },

对于finishRenderChildren方法,也可通过callParent方法来解决原有组件的处理,具体代码如下:

    privates: {

        finishRenderChildren: function () {
            var me = this;

            me.callParent(arguments);
            me.hourField.finishRender();
            me.minuteField.finishRender();
            me.secondField.finishRender();
        }

    }

对于initComponent方法,情况复杂点,因为调用callParent后,它又会把值修改回没有时间的日期值,但是不执行callParent又不行。比较幸运的是,在调整日期值后,只调用了initDisabledDays方法,与时间值没有太大关系的调用,因而,可以在callParent方法后,再将值调整回来,具体代码如下:

    initComponent: function() {
        var me = this,
            value = me.value;

        me.callParent();


        me.value = value || new Date();
    },

代码先将初始值保存下来,然后在调用callParent方法后,再调整回原始值。如果后续操作是与日期值有相关操作,且会因时间值的缺失而出现问题,那就比较棘手了。看API,有个callSuper方法可以跳过重写方法的,但测试过并不行。

对于setValue和selectToday方法,直接复制过来就行了。
对于fullUpdate方法,可以使用callParent方法来解决,具体代码如下:

    fullUpdate: function(date) {
        var me = this;


        me.hourField.setValue(date.getHours());
        me.minuteField.setValue(date.getMinutes());
        me.secondField.setValue(date.getSeconds());
        me.callParent(arguments);
    },

对于handleTabKey、getSelectedDate、handleDateClick、selectedUpdate和onOkClick方法,直接复制过来就行了。

经进一步测试,发现在下拉选择在调用setValue方法后,有时候并不刷新时间值,因而,需要修改setValue方法中调用update方法的代码,以强制刷新,具体代码如下:

    setValue: function(value) {
        this.value = value || new Date();
        return this.update(this.value, true);
    },

至此,通过继承方式实现的日期选择字段就已经完成了,完整的代码如下:

Ext.define('Common.ux.picker.Datetime', {
    extend: 'Ext.picker.Date',
    requires: [
        'Ext.form.field.Number'
    ],
    alias: 'widget.datetimepicker',

    renderTpl: [
        '<div id="{id}-innerEl" data-ref="innerEl" role="presentation">',
            '<div class="{baseCls}-header">',
                '<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>',
                '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',
                '<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="presentation" title="{nextText}"></div>',
            '</div>',
            '<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" tabindex="0" aria-readonly="true">',
                '<thead>',
                    '<tr role="row">',
                        '<tpl for="dayNames">',
                            '<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',
                                '<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
                            '</th>',
                        '</tpl>',
                    '</tr>',
                '</thead>',
                '<tbody>',
                    '<tr role="row">',
                        '<tpl for="days">',
                            '{#:this.isEndOfWeek}',
                            '<td role="gridcell">',
                                '<div hidefocus="on" class="{parent.baseCls}-date"></div>',
                            '</td>',
                        '</tpl>',
                    '</tr>',
                '</tbody>',
            '</table>',
            '<table role="grid" class="{baseCls}-footer" role="presentation" cellspacing="0" tabindex="0">',
                '<tr>',
                    '<td style="width:102px;padding:5px">{%this.renderHourField(values, out)%}</td>',
                    '<td style="width:104px;padding:6px">{%this.renderMinuteField(values, out)%}</td>',
                    '<td style="width:102px;padding:5px">{%this.renderSecondField(values, out)%}</td>',
                '</tr>',
            '</table>',
            '<tpl if="showToday">',
                '<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
            '</tpl>',
            '<div id="{id}-todayText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{todayText}.</div>',
            '<div id="{id}-ariaMinText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMinText}.</div>',
            '<div id="{id}-ariaMaxText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMaxText}.</div>',
            '<div id="{id}-ariaDisabledDaysText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDaysText}.</div>',
            '<div id="{id}-ariaDisabledDatesText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDatesText}.</div>',
        '</div>',
        {
            firstInitial: function(value) {
                return Ext.picker.Date.prototype.getDayInitial(value);
            },
            isEndOfWeek: function(value) {
                value--;
                var end = value % 7 === 0 && value !== 0;
                return end ? '</tr><tr role="row">' : '';
            },
            renderTodayBtn: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            },
            renderHourField: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.hourField.getRenderTree(), out);
            },
            renderMinuteField: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.minuteField.getRenderTree(), out);
            },
            renderSecondField: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.secondField.getRenderTree(), out);
            }
        }
    ],

    initComponent: function() {
        var me = this,
            value = me.value;

        me.callParent();


        me.value = value || new Date();
    },

    getRefItems: function() {
        var results = [],
            monthBtn = this.monthBtn,
            todayBtn = this.todayBtn,
            hourField = this.hourField,
            minuteField = this.minuteField,
            secondField = this.secondField;

        if (monthBtn) {
            results.push(monthBtn);
        }

        if (todayBtn) {
            results.push(todayBtn);
        }

        if (hourField) {
            results.push(hourField);
        }

        if (minuteField) {
            results.push(minuteField);
        }

        if (secondField) {
            results.push(secondField);
        }

        return results;
    },

    numberFieldDefaults: {
        allowBlank: false,
        allowDecimals: false,
        width: 92,
        maxLength: 2,
        autoStripChars: true,
        ariaRole: 'presentation',
        enforceMaxLength: true
    },    

    beforeRender: function() {
        var me = this;



        me.hourField = new Ext.form.field.Number(Ext.apply({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            maxValue: 23,
            minValue: 0
        }, me.numberFieldDefaults));

        me.minuteField = new Ext.form.field.Number(Ext.apply({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            maxValue: 59,
            minValue: 0
        }, me.numberFieldDefaults));

        me.secondField = new Ext.form.field.Number(Ext.apply({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            maxValue: 59,
            minValue: 0
        }, me.numberFieldDefaults));


        me.callParent();


    },



    setValue: function(value) {
        // If passed a null value just pass in a new date object.        
        this.value = value || new Date();
        return this.update(this.value, true);
    },

    handleTabKey: function(e) {
        var me = this,
            t = me.getSelectedDate(me.activeDate),
            handler = me.handler,
            value ;

        if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
            value =  new Date(t.dateValue);
            me.setValue(new Date(value.getFullYear(),value.getMonth(), value.getDate(), me.hourField.getValue(), me.minuteField.getValue(), me.secondField.getValue() ));
            me.fireEvent('select', me, me.value);
            if (handler) {
                Ext.callback(handler, me.scope, [me, me.value], null, me, me);
            }
            me.onSelect();
        }
        else {
            me.fireEventArgs('tabout', [me]);
        }
    },

    selectToday: function() {
        var me = this,
            btn = me.todayBtn,
            handler = me.handler;

        if (btn && !btn.disabled) {
            me.setValue(new Date());
            me.fireEvent('select', me, me.value);
            if (handler) {
                Ext.callback(handler, me.scope, [me, me.value], null, me, me);
            }
            me.onSelect();
        }
        return me;
    },


    fullUpdate: function(date) {
        var me = this;

        me.hourField.setValue(date.getHours());
        me.minuteField.setValue(date.getMinutes());
        me.secondField.setValue(date.getSeconds());
        me.callParent(arguments);
    },

    onOkClick: function(picker, value) {
        var me = this,
            month = value[0],
            year = value[1],
            date = new Date(year, month, me.getActive().getDate(),me.hourField.getValue(), me.minuteField.getValue(), me.secondField.getValue());

        if (date.getMonth() !== month) {
            date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1,me.hourField.getValue(), me.minuteField.getValue(), me.secondField.getValue()));
        }
        me.setValue(date);
        me.hideMonthPicker();
    },    

    handleDateClick: function(e, t) {
        var me = this,
            handler = me.handler,
            value = new Date(t.dateValue);
        e.stopEvent();
        if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
            me.setValue(new Date(value.getFullYear(),value.getMonth(), value.getDate(), me.hourField.getValue(), me.minuteField.getValue(), me.secondField.getValue() ));
            me.fireEvent('select', me, me.value);

            if (handler) {
                Ext.callback(handler, me.scope, [me, me.value], null, me, me);
            }

            me.onSelect();
        }
    },

    getSelectedDate: function (date) {
        var me = this,
            t = Ext.Date.clearTime(date,true).getTime(),
            cells = me.cells,
            cls = me.selectedCls,
            cellItems = cells.elements,
            cLen = cellItems.length,
            cell, c;

        cells.removeCls(cls);

        for (c = 0; c < cLen; c++) {
            cell = cellItems[c].firstChild;
            if (cell.dateValue === t) {
                return cell;
            }
        }
        return null;
    },    

    selectedUpdate: function(date) {
        var me        = this,
            t         = Ext.Date.clearTime(date,true).getTime(),
            cells     = me.cells,
            cls       = me.selectedCls,
            c,
            cLen      = cells.getCount(),
            cell;

        me.eventEl.dom.setAttribute('aria-busy', 'true');
        cell = me.activeCell;

        if (cell) {
            Ext.fly(cell).removeCls(cls);
            cell.setAttribute('aria-selected', false);
        }

        for (c = 0; c < cLen; c++) {
            cell = cells.item(c);

            if (me.textNodes[c].dateValue === t) {
                me.activeCell = cell.dom;
                me.eventEl.dom.setAttribute('aria-activedescendant', cell.dom.id);
                cell.dom.setAttribute('aria-selected', true);
                cell.addCls(cls);
                me.fireEvent('highlightitem', me, cell);
                break;
            }
        }

        me.eventEl.dom.removeAttribute('aria-busy');
    },


    doDestroy: function() {
        var me = this;

        if (me.rendered) {
            Ext.destroy(
                me.hourField,
                me.minuteField,
                me.secondField
            );
        }

        me.callParent(arguments);
    },


    onMouseDown: function(e) {
        var cmp = Ext.Component.fromElement(e.target);
        if (cmp.isFormField) return;
        e.preventDefault();
    },    

    privates: {

        finishRenderChildren: function () {
            var me = this;

            me.callParent(arguments);
            me.hourField.finishRender();
            me.minuteField.finishRender();
            me.secondField.finishRender();
        }

    }
});


0
0
查看评论

Ext JS 6:将日期字段修改为日期时间字段(一)

本文主要讲述如何将日期选择字段修改日期时间选择字段
  • tianxiaode
  • tianxiaode
  • 2017-08-13 15:34
  • 1349

Ext JS 6:将日期下拉字段修改为日期时间下拉字段(三)

完成了日期时间选择字段,要实现日期时间下拉字段就很简单了,这个只需要修改日期下拉字段的createPicker方法,将选取器换成日期时间选择字段就行了
  • tianxiaode
  • tianxiaode
  • 2017-08-13 18:03
  • 730

type="text/javascript" type="application/javascript"

`type="text/javascript"` 是比较老的写法 IETF 推荐的是 `type="application/javascript"` 实际上这两种没什么大区别,只是不同浏览器的支持不一样。
  • dotNET25
  • dotNET25
  • 2014-04-10 15:47
  • 4181

oracle日期时间数据类型字段更新例子

update CASH_REPLENISH_PLAN set d_transaction_date = to_date('18-03-2016', 'dd-mm-yyyy'); update MOD_RECORD set c_mod_or_che_date = t...
  • seeds_home
  • seeds_home
  • 2016-03-17 13:35
  • 3165

oracle把varchar2修改为clob

delete from fab_policy_his; commit; alter table fab_policy_his modify (fabstract long); alter table fab_policy_his modify (fabstract clob); delete f...
  • u010894914
  • u010894914
  • 2015-10-14 10:26
  • 202

【翻译】Ext JS 6有什么新东西?

Ext JS在Sencha框架中引入了许多新的和令人兴奋的改进。这些变化为基于所有现代浏览器、设备和屏幕尺寸带来了新的功能和可用性。
  • tianxiaode
  • tianxiaode
  • 2015-04-10 18:59
  • 8130

Ext JS 6学习文档-第3章-基础组件

基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮,文本框,日期选择器等等 表单字段的校验 菜单和工具栏 设计一个表单 计算器程序– 本章的示例项目 转载请注明出处:...
  • jiangbo110119
  • jiangbo110119
  • 2017-03-19 10:57
  • 1061

Mysql修改时间的年月日,时分秒不变

首先看看几个mysql的几个函数: SELECT NOW(),CURDATE(),CURTIME() 现在我要把2016-04-11的数据更新为2016-04-12的做法: get_date 为时间字段名 UPDATE t_env_sensor set get_date = ADDTIME (...
  • huguobao520
  • huguobao520
  • 2016-04-12 12:00
  • 1672

[Ext JS 6 By Example 翻译] 第4章 - 数据包装

转载自:http://www.jeeboot.com/archives/1222.html 数据包装 本章探索 Ext JS 中处理数据可用的工具以及服务器和客户端之间的通信。在本章结束时将写一个调用 RESTful 服务的例子。下面是本章的内容: 模型SchemaStores代理过滤和排序做...
  • lovelyelfpop
  • lovelyelfpop
  • 2016-12-27 11:21
  • 1313

修改表内容如果为 NULL,则改为空字符串

BEGIN DECLARE a VARCHAR(200); DECLARE done int DEFAULT FALSE; DECLARE cur CURSOR for select a.COLUMN_NAME from information_schema.`COLUMNS` a WHERE a...
  • wuxbeyond
  • wuxbeyond
  • 2015-06-15 20:08
  • 526
    个人资料
    • 访问:1595243次
    • 积分:18034
    • 等级:
    • 排名:第625名
    • 原创:164篇
    • 转载:28篇
    • 译文:102篇
    • 评论:2194条
    交流QQ群
    391747779
    193238033
    博客专栏
    《Ext JS 6.2实战》
    《Ext JS权威指南》
    《Sencha Touch实战》
    《Ext JS 4.2 实战》
    文章分类
    最新评论