【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             ‘‘,
15                 ‘‘,
16                     ‘‘,
17                         ‘‘,
20                     ‘‘,
21                 ‘‘,
22                 ‘‘,
23                     ‘‘,
24                         ‘{#:this.isEndOfWeek}‘,
25                         ‘‘,
29                     ‘‘,
30                 ‘‘,
31             ‘
‘,
18                             ‘
{.:this.firstInitial}
‘,
19                         ‘
‘,
26                             // The ‘#‘ is needed for keyboard navigation
27                             ‘‘,
28                         ‘
‘,
32             ‘‘,
33                 ‘
{%this.renderTodayBtn(values, out)%}
‘,
34             ‘‘,
35         ‘
‘,
36         {
37             firstInitial: function(value) {
38                 return Ext.picker.Date.prototype.getDayInitial(value);
39             },
40             isEndOfWeek: function(value) {
41                 // convert from 1 based index to 0 based
42                 // by decrementing value once.
43                 value--;
44                 var end = value % 7 === 0 && value !== 0;
45                 return end ? ‘‘ : ‘‘;
46             },
47             renderTodayBtn: function(values, out) {
48                 Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
49             },
50             renderMonthBtn: function(values, out) {
51                 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
52             }
53         }
54     ]
55  });

  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             ‘‘,
 15                 ‘‘,
 16                     ‘‘,
 17                         ‘‘,
 20                     ‘‘,
 21                 ‘‘,
 22                 ‘‘,
 23                     ‘‘,
 24                         ‘{#:this.isEndOfWeek}‘,
 25                         ‘‘,
 29                     ‘‘,
 30                 ‘‘,
 31 32             ‘
‘,
 18                             ‘
{.:this.firstInitial}
‘,
 19                         ‘
‘,
 26                             // The ‘#‘ is needed for keyboard navigation
 27                             ‘‘,
 28                         ‘
             
‘,  
 33                 ‘‘,  
 34                     ‘‘,  
 35                     ‘‘,  
 36                     ‘‘,  
 37                 ‘‘,  
 38             ‘
{%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                 return Ext.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,_$Number=Ext.form.field.Number;  
 77         me.hourBtn=new _$Number({  
 78             minValue:0,  
 79             maxValue:23,  
 80             step:1,  
 81             width:55  
 82         });  
 83         me.minuteBtn=new _$Number({  
 84             minValue:0,  
 85             maxValue:59,  
 86             step:1,  
 87             width:70,  
 88             labelWidth:10,  
 89             fieldLabel:‘ ‘  
 90         });  
 91         me.secOndBtn=new _$Number({  
 92             minValue:0,  
 93             maxValue:59,  
 94             step:1,  
 95             width:70,  
 96             labelWidth:10,  
 97             fieldLabel:‘ ‘
 98         });  
 99   
100         me.okBtn = new Ext.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: me  
108         });  
109         me.callParent();  
110     }
111  });