CalendarCombo.js
2.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/**
* @class Ext.calendar.form.field.CalendarCombo
* @extends Ext.form.ComboBox
* <p>A custom combo used for choosing from the list of available calendars to assign an event to.</p>
* <p>This is pretty much a standard combo that is simply pre-configured for the options needed by the
* calendar components. The default configs are as follows:<pre><code>
fieldLabel: 'Calendar',
triggerAction: 'all',
queryMode: 'local',
forceSelection: true,
selectOnFocus: true,
width: 200
</code></pre>
* @constructor
* @param {Object} config The config object
*/
Ext.define('Ext.calendar.form.field.CalendarCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.calendarpicker',
fieldLabel: 'Calendar',
triggerAction: 'all',
queryMode: 'local',
forceSelection: true,
selectOnFocus: true,
// private
defaultCls: 'ext-color-default',
// private
initComponent: function(){
this.valueField = Ext.calendar.data.CalendarMappings.CalendarId.name;
this.displayField = Ext.calendar.data.CalendarMappings.Title.name;
this.listConfig = Ext.apply(this.listConfig || {}, {
getInnerTpl: this.getListItemTpl
});
this.callParent(arguments);
},
// private
getListItemTpl: function(displayField) {
return '<div class="x-combo-list-item ext-color-{' + Ext.calendar.data.CalendarMappings.CalendarId.name +
'}"><div class="ext-cal-picker-icon"> </div>{' + displayField + '}</div>';
},
// private
afterRender: function(){
this.callParent(arguments);
this.wrap = this.el.down('.x-form-item-body');
this.wrap.addCls('ext-calendar-picker');
this.icon = Ext.core.DomHelper.append(this.wrap, {
tag: 'div', cls: 'ext-cal-picker-icon ext-cal-picker-mainicon'
});
},
/* @private
* Value can be a data value or record, or an array of values or records.
*/
getStyleClass: function(value){
var val = value;
if (!Ext.isEmpty(val)) {
if (Ext.isArray(val)) {
val = val[0];
}
return 'ext-color-' + (val.data ? val.data[Ext.calendar.data.CalendarMappings.CalendarId.name] : val);
}
return '';
},
// inherited docs
setValue: function(value) {
if (!value && this.store.getCount() > 0) {
// ensure that a valid value is always set if possible
value = this.store.getAt(0).data[Ext.calendar.data.CalendarMappings.CalendarId.name];
}
if (this.wrap && value) {
var currentClass = this.getStyleClass(this.getValue()),
newClass = this.getStyleClass(value);
this.wrap.replaceCls(currentClass, newClass);
}
this.callParent(arguments);
}
});