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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
<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
*/
<div id="cls-Ext.calendar.DayView"></div>/**
* @class Ext.calendar.DayView
* @extends Ext.Container
* <p>Unlike other calendar views, is not actually a subclass of {@link Ext.calendar.CalendarView CalendarView}.
* Instead it is a {@link Ext.Container Container} subclass that internally creates and manages the layouts of
* a {@link Ext.calendar.DayHeaderView DayHeaderView} and a {@link Ext.calendar.DayBodyView DayBodyView}. As such
* DayView accepts any config values that are valid for DayHeaderView and DayBodyView and passes those through
* to the contained views. It also supports the interface required of any calendar view and in turn calls methods
* on the contained views as necessary.</p>
* @constructor
* @param {Object} config The config object
*/
Ext.calendar.DayView = Ext.extend(Ext.Container, {
<div id="cfg-Ext.calendar.DayView-showTime"></div>/**
* @cfg {Boolean} showTime
* True to display the current time in today's box in the calendar, false to not display it (defautls to true)
*/
showTime: true,
<div id="cfg-Ext.calendar.DayView-showTodayText"></div>/**
* @cfg {Boolean} showTodayText
* True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true)
*/
showTodayText: true,
<div id="cfg-Ext.calendar.DayView-todayText"></div>/**
* @cfg {String} todayText
* The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today')
*/
todayText: 'Today',
<div id="cfg-Ext.calendar.DayView-ddCreateEventText"></div>/**
* @cfg {String} ddCreateEventText
* The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to
* 'Create event for {0}' where {0} is a date range supplied by the view)
*/
ddCreateEventText: 'Create event for {0}',
<div id="cfg-Ext.calendar.DayView-ddMoveEventText"></div>/**
* @cfg {String} ddMoveEventText
* The text to display inside the drag proxy while dragging an event to reposition it (defaults to
* 'Move event to {0}' where {0} is the updated event start date/time supplied by the view)
*/
ddMoveEventText: 'Move event to {0}',
<div id="cfg-Ext.calendar.DayView-dayCount"></div>/**
* @cfg {Number} dayCount
* The number of days to display in the view (defaults to 1)
*/
dayCount: 1,
// private
initComponent : function(){
// rendering more than 7 days per view is not supported
this.dayCount = this.dayCount > 7 ? 7 : this.dayCount;
var cfg = Ext.apply({}, this.initialConfig);
cfg.showTime = this.showTime;
cfg.showTodatText = this.showTodayText;
cfg.todayText = this.todayText;
cfg.dayCount = this.dayCount;
cfg.wekkCount = 1;
var header = Ext.applyIf({
xtype: 'dayheaderview',
id: this.id+'-hd'
}, cfg);
var body = Ext.applyIf({
xtype: 'daybodyview',
id: this.id+'-bd'
}, cfg);
this.items = [header, body];
this.addClass('ext-cal-dayview ext-cal-ct');
Ext.calendar.DayView.superclass.initComponent.call(this);
},
// private
afterRender : function(){
Ext.calendar.DayView.superclass.afterRender.call(this);
this.header = Ext.getCmp(this.id+'-hd');
this.body = Ext.getCmp(this.id+'-bd');
this.body.on('eventsrendered', this.forceSize, this);
},
// private
refresh : function(){
this.header.refresh();
this.body.refresh();
},
// private
forceSize: function(){
// The defer call is mainly for good ol' IE, but it doesn't hurt in
// general to make sure that the window resize is good and done first
// so that we can properly calculate sizes.
(function(){
var ct = this.el.up('.x-panel-body'),
hd = this.el.child('.ext-cal-day-header'),
h = ct.getHeight() - hd.getHeight();
this.el.child('.ext-cal-body-ct').setHeight(h);
}).defer(10, this);
},
// private
onResize : function(){
this.forceSize();
},
// private
getViewBounds : function(){
return this.header.getViewBounds();
},
<div id="method-Ext.calendar.DayView-getStartDate"></div>/**
* Returns the start date of the view, as set by {@link #setStartDate}. Note that this may not
* be the first date displayed in the rendered calendar -- to get the start and end dates displayed
* to the user use {@link #getViewBounds}.
* @return {Date} The start date
*/
getStartDate : function(){
return this.header.getStartDate();
},
<div id="method-Ext.calendar.DayView-setStartDate"></div>/**
* Sets the start date used to calculate the view boundaries to display. The displayed view will be the
* earliest and latest dates that match the view requirements and contain the date passed to this function.
* @param {Date} dt The date used to calculate the new view boundaries
*/
setStartDate: function(dt){
this.header.setStartDate(dt, true);
this.body.setStartDate(dt, true);
},
// private
renderItems: function(){
this.header.renderItems();
this.body.renderItems();
},
<div id="method-Ext.calendar.DayView-isToday"></div>/**
* Returns true if the view is currently displaying today's date, else false.
* @return {Boolean} True or false
*/
isToday : function(){
return this.header.isToday();
},
<div id="method-Ext.calendar.DayView-moveTo"></div>/**
* Updates the view to contain the passed date
* @param {Date} dt The date to display
*/
moveTo : function(dt, noRefresh){
this.header.moveTo(dt, noRefresh);
this.body.moveTo(dt, noRefresh);
},
<div id="method-Ext.calendar.DayView-moveNext"></div>/**
* Updates the view to the next consecutive date(s)
*/
moveNext : function(noRefresh){
this.header.moveNext(noRefresh);
this.body.moveNext(noRefresh);
},
<div id="method-Ext.calendar.DayView-movePrev"></div>/**
* Updates the view to the previous consecutive date(s)
*/
movePrev : function(noRefresh){
this.header.movePrev(noRefresh);
this.body.movePrev(noRefresh);
},
<div id="method-Ext.calendar.DayView-moveDays"></div>/**
* Shifts the view by the passed number of days relative to the currently set date
* @param {Number} value The number of days (positive or negative) by which to shift the view
*/
moveDays : function(value, noRefresh){
this.header.moveDays(value, noRefresh);
this.body.moveDays(value, noRefresh);
},
<div id="method-Ext.calendar.DayView-moveToday"></div>/**
* Updates the view to show today
*/
moveToday : function(noRefresh){
this.header.moveToday(noRefresh);
this.body.moveToday(noRefresh);
}
});
Ext.reg('dayview', Ext.calendar.DayView);
</pre>
</body>
</html>
|
