I am looking for a way to apply a class to one or more dates in a datepicker on the screen. I have extended the Ext.picker.Date control into my own "myDatepicker" control, and have that appearing on the screen successfully, but from there I'm kind of at a loss. I want to be able to assign a custom parameter, like "myDates" and have those dates (assume all in the same month) get a class assigned to them.

I looked through the source code for Ext.picker.Date and looked at the "setDisabledDates" function, and honestly it wasn't clear how to modify this (in my own component of course) to use a different class.

If I add a function like "setMyDates" do I have to do something to get it to run when the "myDates" parameter is set at initiation? Like in "afterRender"?

Also how would I find and add a class to a specific date in the picker?

This is the main code that has the panel with the extended datepicker:

Ext.define('MyApp.view.ExtendTest', {
    extend: 'Ext.container.Container',
    requires: ['MyApp.view.myDatepicker'],
    items: [
            xtype: 'panel',
            title: 'Extended Datepicker',
            items: [{
                xtype: "mydatepicker",
                value: new Date("10/1/2012"),
                myDates:   ["10/12/2012"]
And this is the code I'm using that is extending the datepicker:

Ext.define('MyApp.view.myDatepicker', {
    extend: 'Ext.picker.Date',
    alias: 'widget.mydatepicker',

    // defaults
    myDates    : [],
    highlightCls : "",
    // functions
    initComponent: function() {
        var me = this;

    afterRender: function() {
        // this will get called automatically
        var me = this;

    setMyDates: function() {
        // this will not get called when the object is newly created