Ext 封装精确到时分秒的时间选择控件

/**
 * 带时分秒的时间控件选择器
 */
Ext.define('baseUx.form.datetime.DateTimePicker', {
    extend: 'Ext.picker.Date',
    alias: 'widget.datetimepicker',
    alternateClassName: 'Ext.DateTimePicker',
    renderTpl: [
        '
 
  ',
        '
  
   ', '
   
    
   ', '
   
    {%this.renderMonthBtn(values, out)%}
   ', '
   
    
   ', '
  ',
        '
  
   ', '
  
  
   ', '{#:this.isEndOfWeek}', '
  
  
   ', '
   
    
     ', '
     {.:this.firstInitial}', '', '
    
   ', '
   
    
     ', '
     ', '', '', '', '', '', '
    
   ', '
  ',
        '
  
   ', '
   
    {%this.renderHour(values, out)%}{%this.renderMinute(values, out)%}{%this.renderSecond(values, out)%}{%this.renderTodayBtn(values, out)%}
   ', '
  ',
        '
 ',
        {
            firstInitial: function(value) {
                return value.substr(0,1);
            },
            isEndOfWeek: function(value) {
                // convert from 1 based index to 0 based
                // by decrementing value once.
                value--;
                var end = value % 7 === 0 && value !== 0;
                return end ? '' : '';
            },
            longDay: function(value){
                return Ext.Date.format(value, this.longDayFormat);
            },
            renderHour: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.hour.getRenderTree(), out);
            },
            renderMinute: function(values, out) {
                out.push('  :  ');
                Ext.DomHelper.generateMarkup(values.$comp.minute.getRenderTree(), out);
            },
            renderSecond: function(values, out) {
                out.push('  :  ');
                Ext.DomHelper.generateMarkup(values.$comp.second.getRenderTree(), out);
            },
            renderTodayBtn: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            }
        }
    ],
    /**
     * 创建时分秒控件
     */
    beforeRender: function () {
        /**---------------------*/
        var me = this;
        me.hour = Ext.create('Ext.form.field.Number', {
            scope: me,
            ownerCt: me,
            editable : false,
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 23,
            width: 45,
            style: {float:"left"},
            enableKeyEvents: true,
            listeners: {
                keyup: function(field, e){
                    if (field.getValue() > 23){
                        e.stopEvent();
                        field.setValue(23);
                    }
                }
            }
        });

        me.minute = Ext.create('Ext.form.field.Number', {
            scope: me,
            ownerCt: me,
            style : {float:"left"},
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 59,
            editable : false,
            width: 45,
            enableKeyEvents: true,
            listeners: {
                keyup: function(field, e){
                    if (field.getValue() > 59){
                        e.stopEvent();
                        field.setValue(59);
                    }
                }
            }
        });

        me.second = Ext.create('Ext.form.field.Number', {
            scope: me,
            ownerCt: me,
            editable : false,
            style : {float:"left"},
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 59,
            width: 45,
            enableKeyEvents: true,
            listeners: {
                keyup: function(field, e){
                    if (field.getValue() > 59){
                        e.stopEvent();
                        field.setValue(59);
                    }
                }
            }
        });

        me.callParent();
    },

    /**
     * 渲染时分秒控件
     */
    finishRenderChildren: function () {
        this.callParent();
        /**--------------------------------------*/
        this.hour.finishRender();
        this.minute.finishRender();
        this.second.finishRender();
        /**--------------------------------------*/
    },
    /**
     * Update the contents of the picker
     * @private
     * @param {Date} date The new date
     * @param {Boolean} forceRefresh True to force a full refresh
     */
    update : function(date, forceRefresh){
        var me = this;
        /**-----------设置时分秒----------------*/
        date.setHours(me.hour.getValue());
        date.setMinutes(me.minute.getValue());
        date.setSeconds(me.second.getValue());
        /**-----------设置时分秒----------------*/

        me.callParent(arguments);
    }
});


/**
 * 带时分秒的日期控件
 * @author linzhichao
 */
Ext.define('baseUx.form.datetime.DateTime', {
    extend:'Ext.form.field.Date',
    alias: 'widget.datetimefield',
    requires: ['baseUx.form.datetime.DateTimePicker'],
    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    trigger2Cls: Ext.baseCSSPrefix + 'form-date-trigger',
    editable : false,
    format : 'Y-m-d H:i:s',
    /**
     * 添加清除按钮
     */
    initComponent: function() {
        var me = this;
        me.onTrigger2Click = Ext.clone(me.onTrigger1Click);
        me.onTrigger1Click = function(){
            me.reset();
        }

        me.callParent(arguments);
    },
    /**
     * 创建时间选择器
     * @return {}
     */
    createPicker: function() {
        var me = this,
            format = Ext.String.format;
        return new baseUx.form.datetime.DateTimePicker({
            pickerField: me,
            ownerCt: me.ownerCt,
            renderTo: document.body,
            floating: true,
            hidden: true,
            focusOnShow: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: {
                scope: me,
                select: me.onSelect
            },
            keyNavConfig: {
                esc: function() {
                    me.collapse();
                }
            }
        });
    },
    /**
     * 控制按钮的显隐
     */
    afterRender: function(){
        this.callParent();
        if(this.hideTrigger1){//隐藏清除按钮
            this.triggerCell.item(0).setDisplayed(false);
        }
        if(this.hideTrigger2){//隐藏选择按钮
            this.triggerCell.item(1).setDisplayed(false);
        }
    },

    /**
     * @private
     * 设置选择器的值
     */
    onExpand: function() {
        var me = this,
            value = me.getValue() instanceof Date ? me.getValue() : new Date();
        me.picker.setValue(value);

        me.picker.hour.setValue(value.getHours());
        me.picker.minute.setValue(value.getMinutes());
        me.picker.second.setValue(value.getSeconds());
    }
});