/** * @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:
*/ // 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);