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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
/*
* This is the view used internally by the panel that displays overflow events in the
* month view. Anytime a day cell cannot display all of its events, it automatically displays
* a link at the bottom to view all events for that day. When clicked, a panel pops up that
* uses this view to display the events for that day.
*/
Ext.calendar.MonthDayDetailView = Ext.extend(Ext.BoxComponent, {
initComponent: function() {
Ext.calendar.CalendarView.superclass.initComponent.call(this);
this.addEvents({
eventsrendered: true
});
if (!this.el) {
this.el = document.createElement('div');
}
},
afterRender: function() {
this.tpl = this.getTemplate();
Ext.calendar.MonthDayDetailView.superclass.afterRender.call(this);
this.el.on({
'click': this.view.onClick,
'mouseover': this.view.onMouseOver,
'mouseout': this.view.onMouseOut,
scope: this.view
});
},
getTemplate: function() {
if (!this.tpl) {
this.tpl = new Ext.XTemplate(
'<div class="ext-cal-mdv x-unselectable">',
'<table class="ext-cal-mvd-tbl" cellpadding="0" cellspacing="0">',
'<tbody>',
'<tpl for=".">',
'<tr><td class="ext-cal-ev">{markup}</td></tr>',
'</tpl>',
'</tbody>',
'</table>',
'</div>'
);
}
this.tpl.compile();
return this.tpl;
},
update: function(dt) {
this.date = dt;
this.refresh();
},
refresh: function() {
if (!this.rendered) {
return;
}
var eventTpl = this.view.getEventTemplate(),
templateData = [];
evts = this.store.queryBy(function(rec) {
var thisDt = this.date.clearTime(true).getTime(),
recStart = rec.data[Ext.calendar.EventMappings.StartDate.name].clearTime(true).getTime(),
startsOnDate = (thisDt == recStart),
spansDate = false;
if (!startsOnDate) {
var recEnd = rec.data[Ext.calendar.EventMappings.EndDate.name].clearTime(true).getTime();
spansDate = recStart < thisDt && recEnd >= thisDt;
}
return startsOnDate || spansDate;
},
this);
evts.each(function(evt) {
var item = evt.data,
M = Ext.calendar.EventMappings;
item._renderAsAllDay = item[M.IsAllDay.name] || Ext.calendar.Date.diffDays(item[M.StartDate.name], item[M.EndDate.name]) > 0;
item.spanLeft = Ext.calendar.Date.diffDays(item[M.StartDate.name], this.date) > 0;
item.spanRight = Ext.calendar.Date.diffDays(this.date, item[M.EndDate.name]) > 0;
item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth':
'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright': ''));
templateData.push({
markup: eventTpl.apply(this.getTemplateEventData(item))
});
},
this);
this.tpl.overwrite(this.el, templateData);
this.fireEvent('eventsrendered', this, this.date, evts.getCount());
},
getTemplateEventData: function(evt) {
var data = this.view.getTemplateEventData(evt);
data._elId = 'dtl-' + data._elId;
return data;
}
});
Ext.reg('monthdaydetailview', Ext.calendar.MonthDayDetailView);
</pre>
</body>
</html>
|
