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