【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与源码，更快提高，更快进步。