【ExtJS】自定义组件datetimefield(二)

　　

---

接上【ExtJS】自定义组件datetimefield(一)

---

第三步:添加按钮事件绑定，获取选定的时间

     privates:{
         finishRenderChildren: function () {
             var me = this;
             me.hourBtn.finishRender();
             me.minuteBtn.finishRender();
             me.secondBtn.finishRender();
             me.okBtn.finishRender();
                me.callParent();
         }
     }, 

     okHandler : function(){
         var me = this,
             btn = me.okBtn;  

         if(btn && !btn.disabled){
             me.setValue(this.getValue());
             me.fireEvent('select', me, me.value);
             me.onSelect();
         }
         return me;
     },
     setValue : function(date, isfixed){
         var me = this;
         if(isfixed!==true){
             date.setHours(me.hourBtn.getValue());
             date.setMinutes(me.minuteBtn.getValue());
             date.setSeconds(me.secondBtn.getValue());
         }
         me.value=date;
         me.update(me.value);
         return me;
     }

---

第四步:建新类My.form.field.DateTime，继承Ext.form.field.Date，修改其picker为自定义picker

 Ext.define('My.form.field.DateTime', {
     extend:'Ext.form.field.Date',
     alias: 'widget.datetimefield',
     requires: ['My.picker.DateTime'],  

     format : "Y-m-d H:i:s",  

     altFormats : "Y-m-d H:i:s",  

     createPicker: function() {
         var me = this,
             format = Ext.String.format;  

         return new Go.picker.DateTime({
             pickerField: me,
             ownerCt: me.ownerCt,
             renderTo: document.body,
             floating: true,
             hidden: true,
             focusOnShow: true,
             minDate: me.minValue,
             maxDate: me.maxValue,
             disabledDatesRE: me.disabledDatesRE,
             disabledDatesText: me.disabledDatesText,
             disabledDays: me.disabledDays,
             disabledDaysText: me.disabledDaysText,
             format: me.format,
             showToday: me.showToday,
             startDay: me.startDay,
             minText: format(me.minText, me.formatDate(me.minValue)),
             maxText: format(me.maxText, me.formatDate(me.maxValue)),
             listeners: {
                 scope: me,
                 select: me.onSelect
             },
             keyNavConfig: {
                 esc: function() {
                     me.collapse();
                 }
             }
         });
     }
 });  

---

第五步:调用My.form.field.Date呈现效果

 Ext.onReady(function(){
     Ext.create('My.form.field.DateTime',{
                 renderTo:Ext.getBody(),
                 fieldLabel:'日期选择器',
                 value:'2013-04-27 12:12:12',
                 format:'Y-m-d H:i:s'
             });
 });

效果：

---

---

总结：

　　这个扩展组件主要参考了源码中组件继承与实现的方法，虽然达成了预期效果，不过使用体验并不太好，还有很多问题需要解决，下一步就是完善这些方法。

　　在这个学习过程中，参考了很多别人的例子，从中能够学到很多。很多方法在api中解释很简单，网上也查不到使用的方法，而往往能在查看源码的过程中了解到该方法的作用与用途，这就体现了参考源码的重要性。

　　多查看api与源码，更快提高，更快进步。