Date picker. Issuance of a certificate of dates of the month

Question

I highlight several dates per month when the date selection is displayed. This is done by adding the 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 date object passed to the above function 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 that the date picker will call.

 setDatesToHighlight: function(picker){ picker.highlightDates(picker.picker,this.specificDates); } 

Finally, this is called when the date picker becomes visible using the distribution listener.

 items: [{ xtype: 'datefield', editable: false, listeners: { expand: 'setDatesToHighlight' } }] 

This all works fine until I change the month in the collector. It seems I can not call the setDatesToHighlight function again, so the selected months will be highlighted.

I thought I could override the update method on the collector, but it's hard for me to get a date object that I need to pass to the highlightDates function.

Thanks for any advice.

Answer 1

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, for example:

 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