examples/calendar/src/widgets/CalendarPicker.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.calendar.CalendarPicker
   9  * @extends Ext.form.ComboBox
  10  * <p>A custom combo used for choosing from the list of available calendars to assign an event to.</p>
  11  * <p>This is pretty much a standard combo that is simply pre-configured for the options needed by the
  12  * calendar components. The default configs are as follows:<pre><code>
  13     fieldLabel: 'Calendar',
  14     valueField: 'CalendarId',
  15     displayField: 'Title',
  16     triggerAction: 'all',
  17     mode: 'local',
  18     forceSelection: true,
  19     width: 200
  20 </code></pre>
  21  * @constructor
  22  * @param {Object} config The config object
  23  */
  24 Ext.calendar.CalendarPicker = Ext.extend(Ext.form.ComboBox, {
  25     fieldLabel: 'Calendar',
  26     valueField: 'CalendarId',
  27     displayField: 'Title',
  28     triggerAction: 'all',
  29     mode: 'local',
  30     forceSelection: true,
  31     width: 200,
  32
  33     // private
  34     initComponent: function() {
  35         Ext.calendar.CalendarPicker.superclass.initComponent.call(this);
  36         this.tpl = this.tpl ||
  37         '<tpl for="."><div class="x-combo-list-item ext-color-{' + this.valueField +
  38         '}"><div class="ext-cal-picker-icon">&nbsp;</div>{' + this.displayField + '}</div></tpl>';
  39     },
  40
  41     // private
  42     afterRender: function() {
  43         Ext.calendar.CalendarPicker.superclass.afterRender.call(this);
  44
  45         this.wrap = this.el.up('.x-form-field-wrap');
  46         this.wrap.addClass('ext-calendar-picker');
  47
  48         this.icon = Ext.DomHelper.append(this.wrap, {
  49             tag: 'div',
  50             cls: 'ext-cal-picker-icon ext-cal-picker-mainicon'
  51         });
  52     },
  53
  54     // inherited docs
  55     setValue: function(value) {
  56         this.wrap.removeClass('ext-color-' + this.getValue());
  57         if (!value && this.store !== undefined) {
  58             // always default to a valid calendar
  59             value = this.store.getAt(0).data.CalendarId;
  60         }
  61         Ext.calendar.CalendarPicker.superclass.setValue.call(this, value);
  62         this.wrap.addClass('ext-color-' + value);
  63     }
  64 });
  65
  66 Ext.reg('calendarpicker', Ext.calendar.CalendarPicker);