【ExtJS】自定义组件datetimefield(一)
浏览数：256 /
时间：2015年06月09日
目的：
ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time。不过没有一个在选择日期时选择时间的控件datetimefield。目的就是运用自定义组件的方法，来扩展下拉日期选择控件Ext.form.field.Date，在下拉框中添加时间选择的组件。目标效果：
第一步：继承Ext.picker.Date，创建My.picker.DateTime类
1 Ext.define(‘My.picker.DateTime‘, { 2 extend: ‘Ext.picker.Date‘, 3 alias: ‘widget.datetimepicker‘, 4 okText:‘确定‘, 5 okTip:‘确定‘, 6 7 renderTpl: [ 8 ‘<div id="{id}-innerEl" data-ref="innerEl" role="grid">‘, 9 ‘<div role="presentation" class="{baseCls}-header">‘, 10 ‘<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" title="{prevText}" hidefocus="on" ></a>‘, 11 ‘<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month">{%this.renderMonthBtn(values, out)%}</div>‘, 12 ‘<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="button" title="{nextText}" hidefocus="on" ></a>‘, 13 ‘</div>‘, 14 ‘<table id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">‘, 15 ‘<thead role="presentation"><tr role="row">‘, 16 ‘<tpl for="dayNames">‘, 17 ‘<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">‘, 18 ‘<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>‘, 19 ‘</th>‘, 20 ‘</tpl>‘, 21 ‘</tr></thead>‘, 22 ‘<tbody role="presentation"><tr role="row">‘, 23 ‘<tpl for="days">‘, 24 ‘{#:this.isEndOfWeek}‘, 25 ‘<td role="gridcell" id="{[Ext.id()]}">‘, 26 // The ‘#‘ is needed for keyboard navigation 27 ‘<a href="#" role="button" hidefocus="on" class="{parent.baseCls}-date"></a>‘, 28 ‘</td>‘, 29 ‘</tpl>‘, 30 ‘</tr></tbody>‘, 31 ‘</table>‘, 32 ‘<tpl if="showToday">‘, 33 ‘<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>‘, 34 ‘</tpl>‘, 35 ‘</div>‘, 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 ? ‘</tr><tr role="row">‘ : ‘‘; 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 });
其中renderTpl部分与后面按钮渲染部分出自源码。
效果：
第二步:在原布局中添加3个spinner组件用来选取时、分、秒，添加一个确认按钮，并在组件渲染之前，将自定义添加的时、分、秒和确认按钮进行初始化
1 Ext.define(‘My.picker.DateTime‘, { 2 extend: ‘Ext.picker.Date‘, 3 alias: ‘widget.datetimepicker‘, 4 okText:‘确定‘, 5 okTip:‘确定‘, 6 7 renderTpl: [ 8 ‘<div id="{id}-innerEl" data-ref="innerEl" role="grid">‘, 9 ‘<div role="presentation" class="{baseCls}-header">‘, 10 ‘<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" title="{prevText}" hidefocus="on" ></a>‘, 11 ‘<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month">{%this.renderMonthBtn(values, out)%}</div>‘, 12 ‘<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="button" title="{nextText}" hidefocus="on" ></a>‘, 13 ‘</div>‘, 14 ‘<table id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">‘, 15 ‘<thead role="presentation"><tr role="row">‘, 16 ‘<tpl for="dayNames">‘, 17 ‘<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">‘, 18 ‘<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>‘, 19 ‘</th>‘, 20 ‘</tpl>‘, 21 ‘</tr></thead>‘, 22 ‘<tbody role="presentation"><tr role="row">‘, 23 ‘<tpl for="days">‘, 24 ‘{#:this.isEndOfWeek}‘, 25 ‘<td role="gridcell" id="{[Ext.id()]}">‘, 26 // The ‘#‘ is needed for keyboard navigation 27 ‘<a href="#" role="button" hidefocus="on" class="{parent.baseCls}-date"></a>‘, 28 ‘</td>‘, 29 ‘</tpl>‘, 30 ‘</tr></tbody>‘, 31 32 ‘<table id="{id}-timeEl" style="table-layout:auto;width:auto;margin:0 3px;" class="x-datepicker-inner" cellspacing="0">‘, 33 ‘<tbody><tr>‘, 34 ‘<td>{%this.renderHourBtn(values,out)%}</td>‘, 35 ‘<td>{%this.renderMinuteBtn(values,out)%}</td>‘, 36 ‘<td>{%this.renderSecondBtn(values,out)%}</td>‘, 37 ‘</tr></tbody>‘, 38 ‘</table>‘, 39 40 ‘<tpl if="showToday">‘, 41 ‘<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}</div>‘, 42 ‘</tpl>‘, 43 ‘</div>‘, 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 ? ‘</tr><tr role="row">‘ : ‘‘; 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 });
效果：
第三步:添加按钮事件绑定，各种内部逻辑的处理，获取选定的时间等等
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
