Highlight Dates in Datepicker control

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:

Code:

---

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:

Code:

---

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

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

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

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

---

So first thing you are asking is you want a custom disabled CSS class?

Basically yes. I wanted to be able to highlight different sets of days by using css classes.

I ended up stealing code from the selectedUpdate function, and I pass it the info during the afterComponentLayout function call.

Code:

---

highlightDates: function (highlightDates, highlightCls, highlightTooltip) {
                for(var i = 0; i < highlightDates.length; i++) {
                        var t    = Ext.Date.parse(highlightDates[i], 'm/d/Y').getTime(),
                        cells    = this.cells,
                        cellItems = cells.elements,
                        c,
                        cLen      = cellItems.length,
                        cell;


                        for (c = 0; c < cLen; c++) {
                                cell = Ext.fly(cellItems[c]);
                                if (cell.dom.firstChild.dateValue == t) {
                                        cell.addCls(highlightCls);
                                        cell.dom.title = highlightTooltip + ": " + cell.dom.title;
                                        break;
                                }
                        }
                }
        }

---