当显示日期选择器时,我会突出显示一个月中的多个日期。这是通过向 Picker 组件添加 highlightDates 函数来完成的
Ext.override(Ext.form.field.Picker, {
highlightDates: function (picker, dates) {
if (Ext.isEmpty(dates)) return;
for(var i = 0; i < dates.length; i++) {
var t = new Date(dates[i].date),
dtMillis = t.getTime(),
offset = t.getTimezoneOffset() * 60 * 1000,
dt = dtMillis + offset,
cells = picker.cells.elements;
for (var c = 0; c < cells.length; c++) {
var cell = Ext.fly(cells[c]);
if (cell.dom.firstChild.dateValue == dt) {
cell.addCls('cell-highlight');
break;
}
}
}
}
});
传递给上述函数的日期对象是从 Controller 中的 Ajax 调用设置的变量。
getDates: function (cmp) {
var me = this;
Ext.Ajax.request({
url: 'someurl',
success: function (response) {
me.specificDates = Ext.JSON.decode(response.responseText).specificDates;
}
});
}
Controller 还包含一个函数,日期选择器展开监听器将调用该函数。
setDatesToHighlight: function(picker){
picker.highlightDates(picker.picker,this.specificDates);
}
最后,当使用扩展监听器使日期选择器可见时调用
items: [{
xtype: 'datefield',
editable: false,
listeners: {
expand: 'setDatesToHighlight'
}
}]
这一切正常,直到我在选择器中更改月份。我似乎无法再次触发 setDatesToHighlight Controller 函数,因此选定的月份日期会突出显示。
我想我可以覆盖选择器上的更新方法,但是我很难获得需要传递给 highlightDates 函数的日期对象。
感谢您的任何建议。
最佳答案
您可以通过覆盖 Ext.picker.Date
在每次更新时触发事件。而不是 Ext.form.field.Picker
并为 update
添加覆盖功能如:
Ext.override(Ext.picker.Date, {
update: function (e) {
var res = this.callParent(arguments);
if (!this.pickerField) {
return res;
}
this.pickerField.fireEvent('update', this);
return res;
},
highlightDates: function (picker, dates) {
. . .
}
});
现在您可以从
expand
更改监听器至 update
.工作示例:https://fiddle.sencha.com/#view/editor&fiddle/1l94
关于Extjs 日期选择器。问题突出显示月份更改的日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40808696/