I am highlighting a number of dates in a month when the date picker is shown. This is done by adding a highlightDates function to the Picker component
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;
}
}
}
}
});
The dates object passed into the function above is a variable set from an Ajax call in the controller.
getDates: function (cmp) {
var me = this;
Ext.Ajax.request({
url: 'someurl',
success: function (response) {
me.specificDates = Ext.JSON.decode(response.responseText).specificDates;
}
});
}
The controller also contains a function which the date picker expand listener will call.
setDatesToHighlight: function(picker){
picker.highlightDates(picker.picker,this.specificDates);
}
Finally, this is called when the date picker is made visible using the expand listener
items: [{
xtype: 'datefield',
editable: false,
listeners: {
expand: 'setDatesToHighlight'
}
}]
This is all working fine until i change the month in the picker. I cannot seem to trigger the setDatesToHighlight controller function again so the selected months dates get highlighted.
I was thinking i could override the update method on the picker but i am having difficulty obtaining the dates object i need to pass to the highlightDates function.
Thanks for any advice.
You can fire an event on every update, by overriding Ext.picker.Date
instead of Ext.form.field.Picker
and adding an override for the update
function like:
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) {
. . .
}
});
Now you can change the listener from expand
to update
.
Working example: https://fiddle.sencha.com/#view/editor&fiddle/1l94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With