接上【ExtJS】自定义组件datetimefield(一)
第三步:添加按钮事件绑定，获取选定的时间
1 privates:{ 2 finishRenderChildren: function () { 3 var me = this; 4 me.hourBtn.finishRender(); 5 me.minuteBtn.finishRender(); 6 me.secondBtn.finishRender(); 7 me.okBtn.finishRender(); 8 me.callParent(); 9 } 10 }, 11 12 okHandler : function(){ 13 var me = this, 14 btn = me.okBtn; 15 16 if(btn && !btn.disabled){ 17 me.setValue(this.getValue()); 18 me.fireEvent('select', me, me.value); 19 me.onSelect(); 20 } 21 return me; 22 }, 23 setValue : function(date, isfixed){ 24 var me = this; 25 if(isfixed!==true){ 26 date.setHours(me.hourBtn.getValue()); 27 date.setMinutes(me.minuteBtn.getValue()); 28 date.setSeconds(me.secondBtn.getValue()); 29 } 30 me.value=date; 31 me.update(me.value); 32 return me; 33 }
第四步:建新类My.form.field.DateTime，继承Ext.form.field.Date，修改其picker为自定义picker
1 Ext.define('My.form.field.DateTime', { 2 extend:'Ext.form.field.Date', 3 alias: 'widget.datetimefield', 4 requires: ['My.picker.DateTime'], 5 6 format : "Y-m-d H:i:s", 7 8 altFormats : "Y-m-d H:i:s", 9 10 createPicker: function() { 11 var me = this, 12 format = Ext.String.format; 13 14 return new Go.picker.DateTime({ 15 pickerField: me, 16 ownerCt: me.ownerCt, 17 renderTo: document.body, 18 floating: true, 19 hidden: true, 20 focusOnShow: true, 21 minDate: me.minValue, 22 maxDate: me.maxValue, 23 disabledDatesRE: me.disabledDatesRE, 24 disabledDatesText: me.disabledDatesText, 25 disabledDays: me.disabledDays, 26 disabledDaysText: me.disabledDaysText, 27 format: me.format, 28 showToday: me.showToday, 29 startDay: me.startDay, 30 minText: format(me.minText, me.formatDate(me.minValue)), 31 maxText: format(me.maxText, me.formatDate(me.maxValue)), 32 listeners: { 33 scope: me, 34 select: me.onSelect 35 }, 36 keyNavConfig: { 37 esc: function() { 38 me.collapse(); 39 } 40 } 41 }); 42 } 43 });
第五步:调用My.form.field.Date呈现效果
1 Ext.onReady(function(){ 2 Ext.create('My.form.field.DateTime',{ 3 renderTo:Ext.getBody(), 4 fieldLabel:'日期选择器', 5 value:'2013-04-27 12:12:12', 6 format:'Y-m-d H:i:s' 7 }); 8 });
效果：
总结：
这个扩展组件主要参考了源码中组件继承与实现的方法，虽然达成了预期效果，不过使用体验并不太好，还有很多问题需要解决，下一步就是完善这些方法。
在这个学习过程中，参考了很多别人的例子，从中能够学到很多。很多方法在api中解释很简单，网上也查不到使用的方法，而往往能在查看源码的过程中了解到该方法的作用与用途，这就体现了参考源码的重要性。
多查看api与源码，更快提高，更快进步。