Ext4.2日期时间选择器datetime

来源:互联网 发布:ubuntu 火狐浏览器 编辑:程序博客网 时间:2024/06/16 03:03
1.自定义DateTimeField
Ext.define('WE.DateTimeField', {    extend:'Ext.form.field.Date',    alias: 'dateTime',    requires: ['WE.DateTimePicker'],    format : "Y-m-d H:i:s",    altFormats : "Y-m-d H:i:s",    createPicker: function() {        var me = this,            format = Ext.String.format;        return Ext.create('com.threene.platform.report.plugins.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();                }            }        });    },    onExpand: function() {        var value = this.getValue();        this.picker.setValue(Ext.isDate(value) ? value : new Date(), true);    },    onSelect: function(m, d) {        var me = this;        me.setValue(d);        me.fireEvent('select', me, d);    }});
2.重新datetimepicker
Ext.define('WE.DateTimePicker', {    extend: 'Ext.picker.Date',    alias: 'DateTimePicker',    okText:'确定',    okTip:'确定',    todayText : '现在',    todayTip : '现在',    renderTpl: [        '<div id="{id}-innerEl" role="grid">',        '<div role="presentation" class="{baseCls}-header">',        '<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>',        '<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',        '<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>',        '</div>',        '<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="presentation">',        '<thead role="presentation"><tr role="presentation">',        '<tpl for="dayNames">',        '<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',        '<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',        '</th>',        '</tpl>',        '</tr></thead>',        '<tbody role="presentation"><tr role="presentation">',        '<tpl for="days">',        '{#:this.isEndOfWeek}',        '<td role="gridcell" id="{[Ext.id()]}">',        '<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',        '</td>',        '</tpl>',        '</tr></tbody>',        '</table>',              '<table id="{id}-timeEl" style="table-layout:auto;width:30px;margin:0 3px;" class="x-datepicker-inner" cellspacing="0">',        '<tbody><tr>',        '<td>{%this.renderHourBtn(values,out)%}</td>',        '<td>{%this.renderMinuteBtn(values,out)%}</td>',        '<td>{%this.renderSecondBtn(values,out)%}</td>',        '</tr></tbody>',        '</table>',        '<tpl if="showToday">',              '<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}</div>',        '</tpl>',        '</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);            },            renderHourBtn: function(values, out) {                Ext.DomHelper.generateMarkup(values.$comp.hourBtn.getRenderTree(), out);            },            renderMinuteBtn: function(values, out) {                Ext.DomHelper.generateMarkup(values.$comp.minuteBtn.getRenderTree(), out);            },            renderSecondBtn: function(values, out) {                Ext.DomHelper.generateMarkup(values.$comp.secondBtn.getRenderTree(), out);            },            renderOkBtn: function(values, out) {                Ext.DomHelper.generateMarkup(values.$comp.okBtn.getRenderTree(), out);            }        }    ],    beforeRender: function () {        var me = this,_$Number=Ext.form.field.Number;              me.hourBtn=new _$Number({            minValue:0,            maxValue:23,            step:1,            width:60        });        me.minuteBtn=new _$Number({            minValue:0,            maxValue:59,            step:1,            width:70,            labelWidth:5,            fieldLabel:' '        });        me.secondBtn=new _$Number({            minValue:0,            maxValue:59,            step:1,            width:70,            labelWidth:5,            fieldLabel:' '        });        me.okBtn = new Ext.button.Button({            ownerCt: me,            ownerLayout: me.getComponentLayout(),            text: me.okText,            tooltip: me.okTip,            tooltipType:'title',            handler:me.okHandler,            scope: me        });        me.callParent();    },    finishRenderChildren: function () {        var me = this;                me.hourBtn.finishRender();        me.minuteBtn.finishRender();        me.secondBtn.finishRender();        me.okBtn.finishRender();        me.callParent();    },       okHandler : function(){        var me = this,            btn = me.okBtn;        if(btn && !btn.disabled){            me.setValue(this.getValue());            me.fireEvent('select', me, me.value);            me.onSelect();            me.hide();        }        return me;    },      selectedUpdate: function(date){        this.callParent([Ext.Date.clearTime(date,true)]);    },    update : function(date, forceRefresh){        var me = this;        me.hourBtn.setValue(date.getHours());        me.minuteBtn.setValue(date.getMinutes());        me.secondBtn.setValue(date.getSeconds());        return this.callParent(arguments);    },      setValue : function(date, isfixed){        var me = this;        if(isfixed!==true){            date.setHours(me.hourBtn.getValue());            date.setMinutes(me.minuteBtn.getValue());            date.setSeconds(me.secondBtn.getValue());        }        me.value=date;        me.update(me.value);        return me;    },       beforeDestroy : function() {        var me = this;        if (me.rendered) {                       Ext.destroy(                me.hourBtn,                me.minuteBtn,                me.secondBtn,                me.okBtn            );        }        me.callParent();    }});


在第一个文件中重写了onSelect,这样在选中日期后不会直接隐藏,需点击确定后才会隐藏,但带来一个问题就是第二次选择时要点击两次控件才能弹出

0 0
原创粉丝点击