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

---

　　目的：

　　ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time。不过没有一个在选择日期时选择时间的控件datetimefield。目的就是运用自定义组件的方法，来扩展下拉日期选择控件Ext.form.field.Date，在下拉框中添加时间选择的组件。目标效果：

---

---

第一步：继承Ext.picker.Date，创建My.picker.DateTime类

 Ext.define('My.picker.DateTime', {
     extend: 'Ext.picker.Date',
     alias: 'widget.datetimepicker',
     okText:'确定',
     okTip:'确定',

     renderTpl: [
         '<div id="{id}-innerEl" data-ref="innerEl" role="grid">',
             '<div role="presentation" class="{baseCls}-header">',
                 '<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" title="{prevText}" hidefocus="on" ></a>',
                 '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month">{%this.renderMonthBtn(values, out)%}</div>',
                 '<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="button" title="{nextText}" hidefocus="on" ></a>',
             '</div>',
             '<table id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">',
                 '<thead role="presentation"><tr role="row">',
                     '<tpl for="dayNames">',
                         '<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
                             '<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
                         '</th>',
                     '</tpl>',
                 '</tr></thead>',
                 '<tbody role="presentation"><tr role="row">',
                     '<tpl for="days">',
                         '{#:this.isEndOfWeek}',
                         '<td role="gridcell" id="{[Ext.id()]}">',
                             // The '#' is needed for keyboard navigation
                             '<a href="#" role="button" hidefocus="on" class="{parent.baseCls}-date"></a>',
                         '</td>',
                     '</tpl>',
                 '</tr></tbody>',
             '</table>',
             '<tpl if="showToday">',
                 '<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
             '</tpl>',
         '</div>',
         {
             firstInitial: function(value) {
                 return Ext.picker.Date.prototype.getDayInitial(value);
             },
             isEndOfWeek: function(value) {
                 // convert from 1 based index to 0 based
                 // by decrementing value once.
                 value--;
                 var end = value % 7 === 0 && value !== 0;
                 return end ? '</tr><tr role="row">' : '';
             },
             renderTodayBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
             },
             renderMonthBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
             }
         }
     ]
  });

其中renderTpl部分与后面按钮渲染部分出自源码。

效果：

---

第二步:在原布局中添加3个组件用来选取时、分、秒，添加一个确认按钮，并在组件渲染之前，将自定义添加的时、分、秒和确认按钮进行初始化

 Ext.define('My.picker.DateTime', {
     extend: 'Ext.picker.Date',
     alias: 'widget.datetimepicker',
     okText:'确定',
     okTip:'确定',

     renderTpl: [
         '<div id="{id}-innerEl" data-ref="innerEl" role="grid">',
             '<div role="presentation" class="{baseCls}-header">',
                 '<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" title="{prevText}" hidefocus="on" ></a>',
                 '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month">{%this.renderMonthBtn(values, out)%}</div>',
                 '<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="button" title="{nextText}" hidefocus="on" ></a>',
             '</div>',
             '<table id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">',
                 '<thead role="presentation"><tr role="row">',
                     '<tpl for="dayNames">',
                         '<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
                             '<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
                         '</th>',
                     '</tpl>',
                 '</tr></thead>',
                 '<tbody role="presentation"><tr role="row">',
                     '<tpl for="days">',
                         '{#:this.isEndOfWeek}',
                         '<td role="gridcell" id="{[Ext.id()]}">',
                             // The '#' is needed for keyboard navigation
                             '<a href="#" role="button" hidefocus="on" class="{parent.baseCls}-date"></a>',
                         '</td>',
                     '</tpl>',
                 '</tr></tbody>',

             '<table id="{id}-timeEl" style="table-layout:auto;width:auto;margin:0 3px;" class="x-datepicker-inner" cellspacing="0">',
                 '<tbody><tr>',
                     '<td>{%this.renderHourBtn(values,out)%}</td>',
                     '<td>{%this.renderMinuteBtn(values,out)%}</td>',
                     '<td>{%this.renderSecondBtn(values,out)%}</td>',
                 '</tr></tbody>',
             '</table>',  

             '<tpl if="showToday">',
                 '<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}</div>',
             '</tpl>',
         '</div>',
         {
             firstInitial: function(value) {
                 return Ext.picker.Date.prototype.getDayInitial(value);
             },
             isEndOfWeek: function(value) {
                 // convert from 1 based index to 0 based
                 // by decrementing value once.
                 value--;
                 var end = value % 7 === 0 && value !== 0;
                 return end ? '</tr><tr role="row">' : '';
             },
             renderTodayBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
             },
             renderMonthBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
             },
             renderHourBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.hourBtn.getRenderTree(), out);
             },
             renderMinuteBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.minuteBtn.getRenderTree(), out);
             },
             renderSecondBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.secondBtn.getRenderTree(), out);
             },
             renderOkBtn: function(values, out) {
                 Ext.DomHelper.generateMarkup(values.$comp.okBtn.getRenderTree(), out);
             }
         }
     ],
     beforeRender: function () {
         var me = this;
         me.hourBtn=new Ext.form.field.Number({
             minValue:0,
             maxValue:23,
             step:1,
             width:55
         });
         me.minuteBtn=new Ext.form.field.Number({
             minValue:0,
             maxValue:59,
             step:1,
             width:70,
             labelWidth:10,
             fieldLabel:'&nbsp;'
         });
         me.secondBtn=new Ext.form.field.Number({
             minValue:0,
             maxValue:59,
             step:1,
             width:70,
             labelWidth:10,
             fieldLabel:'&nbsp;'
         });  

         me.okBtn = new Ext.button.Button({
             ownerCt: me,
             ownerLayout: me.getComponentLayout(),
             text: me.okText,
             tooltip: me.okTip,
             tooltipType:'title',
             handler:me.okHandler,
             scope: me
         });
         me.callParent();
     }
  });

效果：

---

第三步:添加按钮事件绑定，各种内部逻辑的处理，获取选定的时间等等