Ext JS 6：將日期欄位修改為日期時間欄位（二）
阿新 • • 發佈：2019-02-03
在上文《Ext JS 6：將日期欄位修改為日期時間欄位（一） 》（以下稱文一）只是簡單的利用日期選擇欄位的原始碼建立了一個日期時間選擇欄位，而不是採用繼承的方式，因而在本地化上，並不能很好的利用日期選擇欄位的本地化資源，需要自己考慮本地化的問題。為了解決這個問題，最好的方式當然是採用繼承的方法來實現日期時間選擇欄位了。而本文就是用來講述如何通過繼承來實現這個的。
首先要做的是在測試環境建立一個名為Test.ux.picker.Datetime2的類，並新增以下定義程式碼：
Ext.define('Test.ux.picker.Datetime2', {
extend: 'Ext.picker.Date' 在程式碼中的extend表明類Datetime2將從Ext.picker.Date派生，別名為uxdatetimepicker2。
從Ext.picker.Date派生日期時間選擇欄位，主要就是把文一中修改的地方移植過來。首先要移植當然是模版了，因而需要把文一中的renderTpl屬性的內容全部複製過來。接下來就是numberFieldDefaults屬性的內容了。
接下來是beforeRender方法，在這裡我們需要建立3個數字欄位，全部複製過來沒必要，因為呼叫callParent方法後，又會重新執行一次重複的程式碼，因而，在這裡只需要保留建立3個數字欄位的程式碼並呼叫callParent方法就行了，具體程式碼如下：
beforeRender: function() {
var me = this;
me.hourField = new Ext.form.field.Number(Ext.apply({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
maxValue: 23,
minValue: 0
}, me.numberFieldDefaults));
me.minuteField 對於getRefItems方法，通過callParent方法無法解決返回陣列包含三個數字欄位的問題，因而只好採用完全重寫的方法，也就是將getRefItems方法全部複製過來。
對於doDestroy方法，可以通過callParent來解決原有元件的銷燬，因而在這裡只銷毀3個數字欄位就行，具體程式碼如下：
doDestroy: function() {
var me = this;
if (me.rendered) {
Ext.destroy(
me.hourField,
me.minuteField,
me.secondField
);
}
me.callParent(arguments);
},對於finishRenderChildren方法，也可通過callParent方法來解決原有元件的處理，具體程式碼如下：
privates: {
finishRenderChildren: function () {
var me = this;
me.callParent(arguments);
me.hourField.finishRender();
me.minuteField.finishRender();
me.secondField.finishRender();
}
}對於initComponent方法，情況複雜點，因為呼叫callParent後，它又會把值修改回沒有時間的日期值，但是不執行callParent又不行。比較幸運的是，在調整日期值後，只調用了initDisabledDays方法，與時間值沒有太大關係的呼叫，因而，可以在callParent方法後，再將值調整回來，具體程式碼如下：
initComponent: function() {
var me = this,
value = me.value;
me.callParent();
me.value = value || new Date();
},程式碼先將初始值儲存下來，然後在呼叫callParent方法後，再調整回原始值。如果後續操作是與日期值有相關操作，且會因時間值的缺失而出現問題，那就比較棘手了。看API，有個callSuper方法可以跳過重寫方法的，但測試過並不行。
對於setValue和selectToday方法，直接複製過來就行了。
對於fullUpdate方法，可以使用callParent方法來解決，具體程式碼如下：
fullUpdate: function(date) {
var me = this;
me.hourField.setValue(date.getHours());
me.minuteField.setValue(date.getMinutes());
me.secondField.setValue(date.getSeconds());
me.callParent(arguments);
},對於handleTabKey、getSelectedDate、handleDateClick、selectedUpdate和onOkClick方法，直接複製過來就行了。
經進一步測試，發現在下拉選擇在呼叫setValue方法後，有時候並不重新整理時間值，因而，需要修改setValue方法中呼叫update方法的程式碼，以強制重新整理，具體程式碼如下：
setValue: function(value) {
this.value = value || new Date();
return this.update(this.value, true);
},至此，通過繼承方式實現的日期選擇欄位就已經完成了，完整的程式碼如下：
Ext.define('Common.ux.picker.Datetime', {
extend: 'Ext.picker.Date',
requires: [
'Ext.form.field.Number'
],
alias: 'widget.datetimepicker',
renderTpl: [
'<div id="{id}-innerEl" data-ref="innerEl" role="presentation">',
'<div class="{baseCls}-header">',
'<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>',
'<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',
'<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="presentation" title="{nextText}"></div>',
'</div>',
'<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" tabindex="0" aria-readonly="true">',
'<thead>',
'<tr role="row">',
'<tpl for="dayNames">',
'<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',
'<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
'</th>',
'</tpl>',
'</tr>',
'</thead>',
'<tbody>',
'<tr role="row">',
'<tpl for="days">',
'{#:this.isEndOfWeek}',
'<td role="gridcell">',
'<div hidefocus="on" class="{parent.baseCls}-date"></div>',
'</td>',
'</tpl>',
'</tr>',
'</tbody>',
'</table>',
'<table role="grid" class="{baseCls}-footer" role="presentation" cellspacing="0" tabindex="0">',
'<tr>',
'<td style="width:102px;padding:5px">{%this.renderHourField(values, out)%}</td>',
'<td style="width:104px;padding:6px">{%this.renderMinuteField(values, out)%}</td>',
'<td style="width:102px;padding:5px">{%this.renderSecondField(values, out)%}</td>',
'</tr>',
'</table>',
'<tpl if="showToday">',
'<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
'</tpl>',
'<div id="{id}-todayText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{todayText}.</div>',
'<div id="{id}-ariaMinText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMinText}.</div>',
'<div id="{id}-ariaMaxText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMaxText}.</div>',
'<div id="{id}-ariaDisabledDaysText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDaysText}.</div>',
'<div id="{id}-ariaDisabledDatesText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDatesText}.</div>',
'</div>',
{
firstInitial: function(value) {
return Ext.picker.Date.prototype.getDayInitial(value);
},
isEndOfWeek: function(value) {
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);
},
renderHourField: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.hourField.getRenderTree(), out);
},
renderMinuteField: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.minuteField.getRenderTree(), out);
},
renderSecondField: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.secondField.getRenderTree(), out);
}
}
],
initComponent: function() {
var me = this,
value = me.value;
me.callParent();
me.value = value || new Date();
},
getRefItems: function() {
var results = [],
monthBtn = this.monthBtn,
todayBtn = this.todayBtn,
hourField = this.hourField,
minuteField = this.minuteField,
secondField = this.secondField;
if (monthBtn) {
results.push(monthBtn);
}
if (todayBtn) {
results.push(todayBtn);
}
if (hourField) {
results.push(hourField);
}
if (minuteField) {
results.push(minuteField);
}
if (secondField) {
results.push(secondField);
}
return results;
},
numberFieldDefaults: {
allowBlank: false,
allowDecimals: false,
width: 92,
maxLength: 2,
autoStripChars: true,
ariaRole: 'presentation',
enforceMaxLength: true
},
beforeRender: function() {
var me = this;
me.hourField = new Ext.form.field.Number(Ext.apply({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
maxValue: 23,
minValue: 0
}, me.numberFieldDefaults));
me.minuteField = new Ext.form.field.Number(Ext.apply({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
maxValue: 59,
minValue: 0
}, me.numberFieldDefaults));
me.secondField = new Ext.form.field.Number(Ext.apply({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
maxValue: 59,
minValue: 0
}, me.numberFieldDefaults));
me.callParent();
},
setValue: function(value) {
// If passed a null value just pass in a new date object.
this.value = value || new Date();
return this.update(this.value, true);
},
handleTabKey: function(e) {
var me = this,
t = me.getSelectedDate(me.activeDate),
handler = me.handler,
value ;
if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
value = new Date(t.dateValue);
me.setValue(new Date(value.getFullYear(),value.getMonth(), value.getDate(), me.hourField.getValue(), me.minuteField.getValue(), me.secondField.getValue() ));
me.fireEvent('select', me, me.value);
if (handler) {
Ext.callback(handler, me.scope, [me, me.value], null, me, me);
}
me.onSelect();
}
else {
me.fireEventArgs('tabout', [me]);
}
},
selectToday: function() {
var me = this,
btn = me.todayBtn,
handler = me.handler;
if (btn && !btn.disabled) {
me.setValue(new Date());
me.fireEvent('select', me, me.value);
if (handler) {
Ext.callback(handler, me.scope, [me, me.value], null, me, me);
}
me.onSelect();
}
return me;
},
fullUpdate: function(date) {
var me = this;
me.hourField.setValue(date.getHours());
me.minuteField.setValue(date.getMinutes());
me.secondField.setValue(date.getSeconds());
me.callParent(arguments);
},
onOkClick: function(picker, value) {
var me = this,
month = value[0],
year = value[1],
date = new Date(year, month, me.getActive().getDate(),me.hourField.getValue(), me.minuteField.getValue(), me.secondField.getValue());
if (date.getMonth() !== month) {
date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1,me.hourField.getValue(), me.minuteField.getValue(), me.secondField.getValue()));
}
me.setValue(date);
me.hideMonthPicker();
},
handleDateClick: function(e, t) {
var me = this,
handler = me.handler,
value = new Date(t.dateValue);
e.stopEvent();
if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
me.setValue(new Date(value.getFullYear(),value.getMonth(), value.getDate(), me.hourField.getValue(), me.minuteField.getValue(), me.secondField.getValue() ));
me.fireEvent('select', me, me.value);
if (handler) {
Ext.callback(handler, me.scope, [me, me.value], null, me, me);
}
me.onSelect();
}
},
getSelectedDate: function (date) {
var me = this,
t = Ext.Date.clearTime(date,true).getTime(),
cells = me.cells,
cls = me.selectedCls,
cellItems = cells.elements,
cLen = cellItems.length,
cell, c;
cells.removeCls(cls);
for (c = 0; c < cLen; c++) {
cell = cellItems[c].firstChild;
if (cell.dateValue === t) {
return cell;
}
}
return null;
},
selectedUpdate: function(date) {
var me = this,
t = Ext.Date.clearTime(date,true).getTime(),
cells = me.cells,
cls = me.selectedCls,
c,
cLen = cells.getCount(),
cell;
me.eventEl.dom.setAttribute('aria-busy', 'true');
cell = me.activeCell;
if (cell) {
Ext.fly(cell).removeCls(cls);
cell.setAttribute('aria-selected', false);
}
for (c = 0; c < cLen; c++) {
cell = cells.item(c);
if (me.textNodes[c].dateValue === t) {
me.activeCell = cell.dom;
me.eventEl.dom.setAttribute('aria-activedescendant', cell.dom.id);
cell.dom.setAttribute('aria-selected', true);
cell.addCls(cls);
me.fireEvent('highlightitem', me, cell);
break;
}
}
me.eventEl.dom.removeAttribute('aria-busy');
},
doDestroy: function() {
var me = this;
if (me.rendered) {
Ext.destroy(
me.hourField,
me.minuteField,
me.secondField
);
}
me.callParent(arguments);
},
onMouseDown: function(e) {
var cmp = Ext.Component.fromElement(e.target);
if (cmp.isFormField) return;
e.preventDefault();
},
privates: {
finishRenderChildren: function () {
var me = this;
me.callParent(arguments);
me.hourField.finishRender();
me.minuteField.finishRender();
me.secondField.finishRender();
}
}
});