The source code

    /**
     * @class Ext.ensible.cal.ColorPalette
     * @extends Ext.ColorPalette
     * Simple color palette class for choosing colors specifically for calendars. This is a lightly modified version
     * of the default Ext ColorPalette that is based on calendar ids rather than hex color codes so that the colors
     * can be easily modified via CSS and automatically applied to calendars. The specific colors used by default are
     * also chosen to provide good color contrast when displayed in calendars.

* @constructor * Create a new ColorPalette * @param {Object} config The config object * @xtype extensible.calendarcolorpalette */ Ext.ensible.cal.ColorPalette = Ext.extend(Ext.ColorPalette, { // private colorCount: 32,
/** * @cfg {Function} handler * Optional. A function that will handle the select event of this color palette. * The handler is passed the following parameters:

*
- `palette` : ColorPalette
  The {@link #palette Ext.ensible.cal.ColorPalette} instance.
*
- `colorId` : String
  The id that identifies the selected color and relates it to a calendar.
*

*/ // private initComponent: function(){ Ext.ensible.cal.ColorPalette.superclass.initComponent.call(this); this.addClass('x-calendar-palette'); this.tpl = new Ext.XTemplate(' '); if(this.handler){ this.on('select', this.handler, this.scope || this); } this.colors = []; for(var i=1; i<=this.colorCount; i++){ this.colors.push(i); } }, // private handleClick : function(e, t){ e.preventDefault(); var el = e.getTarget('.x-cal-color', 3, true); if(el){ var id = el.id.split('-color-')[1]; this.select(id); } },
/** * Selects the specified color in the palette (fires the {@link #select} event) * @param {Number} colorId The id that identifies the selected color and relates it to a calendar * @param {Boolean} suppressEvent (optional) True to stop the select event from firing. Defaults to `false`. */ select : function(colorId, suppressEvent){ if(colorId != this.value){ if(this.value){ Ext.fly(this.id+'-color-'+this.value).removeClass('x-color-palette-sel'); } Ext.get(this.id+'-color-'+colorId).addClass('x-color-palette-sel'); this.value = colorId; if(suppressEvent !== true){ this.fireEvent('select', this, colorId); } } } }); Ext.reg('extensible.calendarcolorpalette', Ext.ensible.cal.ColorPalette);