extjs 下拉日期_【ExtJS】自定义组件datetimefield(一)

1 Ext.define('My.picker.DateTime', {2 extend: 'Ext.picker.Date',3 alias: 'widget.datetimepicker',4 okText:'确定',5 okTip:'确定',6

7 renderTpl: [8 '

',9 '

',10 ' ',11 '

{%this.renderMonthBtn(values, out)%}

',12 ' ',13 '

',14 '

',18 ' {.:this.firstInitial} ',19 '
',26 //The '#' is needed for keyboard navigation 27 '',28 '

32 '

{%this.renderHourBtn(values,out)%}

{%this.renderMinuteBtn(values,out)%}

{%this.renderSecondBtn(values,out)%}

',39

40 '',41 '

{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}

',42 '',43 '',44 {45 firstInitial: function(value) {46 returnExt.picker.Date.prototype.getDayInitial(value);47 },48 isEndOfWeek: function(value) {49 //convert from 1 based index to 0 based

50 //by decrementing value once.

51 value--;52 var end = value % 7 === 0 && value !== 0;53 return end ? '

' : '';54 },55 renderTodayBtn: function(values, out) {56 Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);57 },58 renderMonthBtn: function(values, out) {59 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);60 },61 renderHourBtn: function(values, out) {62 Ext.DomHelper.generateMarkup(values.$comp.hourBtn.getRenderTree(), out);63 },64 renderMinuteBtn: function(values, out) {65 Ext.DomHelper.generateMarkup(values.$comp.minuteBtn.getRenderTree(), out);66 },67 renderSecondBtn: function(values, out) {68 Ext.DomHelper.generateMarkup(values.$comp.secondBtn.getRenderTree(), out);69 },70 renderOkBtn: function(values, out) {71 Ext.DomHelper.generateMarkup(values.$comp.okBtn.getRenderTree(), out);72 }73 }74 ],75 beforeRender: function() {76 var me = this;77 me.hourBtn=newExt.form.field.Number({78 minValue:0,79 maxValue:23,80 step:1,81 width:55

82 });83 me.minuteBtn=newExt.form.field.Number({84 minValue:0,85 maxValue:59,86 step:1,87 width:70,88 labelWidth:10,89 fieldLabel:' '

90 });91 me.secondBtn=newExt.form.field.Number({92 minValue:0,93 maxValue:59,94 step:1,95 width:70,96 labelWidth:10,97 fieldLabel:' '

98 });99

100 me.okBtn = newExt.button.Button({101 ownerCt: me,102 ownerLayout: me.getComponentLayout(),103 text: me.okText,104 tooltip: me.okTip,105 tooltipType:'title',106 handler:me.okHandler,107 scope: me108 });109 me.callParent();110 }111 });