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
- Ext4.2日期时间选择器datetime
- 格式化 日期时间 DateTime
- SQLite datetime 时间日期
- DateTime秒数转日期时间
- boost datetime 时间日期
- 时间选择器和日期选择器
- Java DateTime 日期时间处理
- python datetime 时间日期处理
- python datetime 时间日期处理
- python datetime 时间日期处理
- datetime 时间，日期相关操作
- 自定义日期时间选择器
- 日期时间选择器：datetimepicker
- JS日期时间选择器
- bootstrap3 时间日期选择器
- 时间日期选择器
- 时间日期选择器、对话框
- 日期时间选择器：datetimepicker
- D3数据连接：进入
- 爬取西刺网代理IP并检验保存
- 6.3Bellman-Ford——解决负权边
- 某公司电话面试
- mybatis连接mysql数据库插入中文乱码
- Ext4.2日期时间选择器datetime
- GYM 100883 A.Random Fightings （状压DP）
- 6.4Bellman-Ford的队列优化
- 1008. 数组元素循环右移问题 (20)
- Git使用
- centos 7安装 navicat
- 数学复习1：导数与积分
- 多线程等待唤醒机制之生产消费者模式
- (转)Android之Bundle是什么_什么是Bundle
