Mercurial > lada > lada-client

comparison app/view/widget/base/DateTimePicker.js @ 649:1f51b6020f8c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added new DateTimeFields.
author Raimund Renkert <raimund.renkert@intevation.de>
date Wed, 18 Mar 2015 13:54:18 +0100
parents
children f4fef1d3a2ce
comparison
equal deleted inserted replaced
648:199246596bf7 649:1f51b6020f8c
1 Ext.define('Lada.view.widget.base.DateTimePicker', {
2 extend: 'Ext.picker.Date',
3 alias: 'widget.datetimepicker',
4 requires: [
5 'Ext.picker.Date',
6 'Ext.form.field.Number'
7 ],
8
9 todayText: 'Jetzt',
10
11 renderTpl: [
12 '<div id="{id}-innerEl" role="grid">',
13 '<div role="presentation" class="{baseCls}-header">',
14 // the href attribute is required for the :hover selector to work in IE6/7/quirks
15 '<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>',
16 '<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
17 // the href attribute is required for the :hover selector to work in IE6/7/quirks
18 '<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>',
19 '</div>',
20 '<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">',
21 '<thead role="presentation"><tr role="row">',
22 '<tpl for="dayNames">',
23 '<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
24 '<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
25 '</th>',
26 '</tpl>',
27 '</tr></thead>',
28 '<tbody role="presentation"><tr role="row">',
29 '<tpl for="days">',
30 '{#:this.isEndOfWeek}',
31 '<td role="gridcell" id="{[Ext.id()]}">',
32 // the href attribute is required for the :hover selector to work in IE6/7/quirks
33 '<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',
34 '</td>',
35 '</tpl>',
36 '</tr></tbody>',
37 '</table>',
38 '<div id="{id}-timeEl" role="presentation" class="{baseCls}-footer">',
39 '<table cellspacing="0">',
40 '<colgroup><col width="70"><col width="40"><col width="40"></colgroup>',
41 '<tr>',
42 '<td>',
43 '<div id="{id}-timeLabelEl" role="presentation">{%this.renderTimeLabel(values, out)%}</div>',
44 '</td><td>',
45 '<div id="{id}-timeHourEl" role="presentation">{%this.renderTimeHour(values, out)%}</div>',
46 '</td><td>',
47 '<div id="{id}-timeMinuteEl" role="presentation">{%this.renderTimeMinute(values, out)%}</div>',
48 '</td>',
49 '</tr>',
50 '</table>',
51 '<table cellspacing="0">',
52 '<colgroup width="75"></colgroup>',
53 '<tr>',
54 '<td>',
55 '<div id="{id}-footerNowEl" role="presentation">{%this.renderTodayBtn(values, out)%}</div>',
56 '</td><td>',
57 '<div id="{id}-footerAcceptEl" role="presentation">{%this.renderAcceptBtn(values, out)%}</div>',
58 '</td>',
59 '</tr>',
60 '</table>',
61 '</div>',
62 '</div>',
63 {
64 firstInitial: function(value) {
65 return Ext.picker.Date.prototype.getDayInitial(value);
66 },
67 isEndOfWeek: function(value) {
68 // convert from 1 based index to 0 based
69 // by decrementing value once.
70 value--;
71 var end = value % 7 === 0 && value !== 0;
72 return end ? '</tr><tr role="row">' : '';
73 },
74 renderTodayBtn: function(values, out) {
75 Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
76 },
77 renderMonthBtn: function(values, out) {
78 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
79 },
80 renderTimeLabel: function(values, out) {
81 Ext.DomHelper.generateMarkup(values.$comp.timeLabel.getRenderTree(), out);
82 },
83 renderTimeHour: function(values, out) {
84 Ext.DomHelper.generateMarkup(values.$comp.hourField.getRenderTree(), out);
85 },
86 renderTimeMinute: function(values, out) {
87 Ext.DomHelper.generateMarkup(values.$comp.minuteField.getRenderTree(), out);
88 },
89 renderAcceptBtn: function(values, out) {
90 Ext.DomHelper.generateMarkup(values.$comp.acceptBtn.getRenderTree(), out);
91 }
92 }
93 ],
94
95 beforeRender: function () {
96 var me = this;
97 me.hourField = new Ext.form.field.Number({
98 ownerCt: me,
99 ownerLayout: me.getComponentLayout(),
100 value: 0,
101 increment: 1,
102 minValue: 0,
103 maxValue: 23,
104 listeners: {
105 change: me.changeTimeValue,
106 scope: me
107 }
108 });
109
110 me.minuteField = new Ext.form.field.Number({
111 ownerCt: me,
112 ownerLayout: me.getComponentLayout(),
113 value: 0,
114 increment: 1,
115 minValue: 0,
116 maxValue: 59,
117 listeners: {
118 change: me.changeTimeValue,
119 scope: me
120 }
121 });
122
123 me.timeLabel = new Ext.form.Label({
124 ownerCt: me,
125 ownerLayout: me.getComponentLayout(),
126 text: 'Zeit'
127 });
128 me.acceptBtn = new Ext.button.Button({
129 ownerCt: me,
130 ownerLayout: me.getComponentLayout(),
131 text: 'Übernehmen',
132 handler: me.acceptDate,
133 scope: me
134 });
135 me.callParent();
136 },
137
138 finishRenderChildren: function() {
139 var me = this;
140 me.callParent();
141 me.timeLabel.finishRender();
142 me.hourField.finishRender();
143 me.minuteField.finishRender();
144 me.acceptBtn.finishRender();
145 },
146
147 showTimePicker: function() {
148 var me = this;
149 var el = me.el;
150 Ext.defer(function() {
151 var xPos = el.getX();
152 var yPos = el.getY() + el.getHeight();
153 me.timePicker.setHeight(30);
154 me.timePicker.setWidth(el.getWidth());
155 me.timePicker.setPosition(xPos, yPos);
156 me.timePicker.show();
157 },1);
158 },
159
160 beforeDestroy: function() {
161 var me = this;
162 if (me.rendered) {
163 Ext.destroy(
164 me.minuteField,
165 me.hourField
166 );
167 }
168 me.callParent();
169 },
170
171 changeTimeValue: function (field, nValue, oValue) {
172 },
173
174 setValue: function(value) {
175 value.setSeconds(0);
176 this.value = new Date(value);
177 return this.update(this.value);
178 },
179
180 selectToday: function() {
181 var me = this;
182 var btn = me.todayBtn;
183 var handler = me.handler;
184 var auxDate = new Date();
185
186 if (btn && !btn.disabled) {
187 me.pickerField.setValue(new Date(auxDate.setSeconds(0)));
188 me.setValue(new Date(auxDate.setSeconds(0)));
189 if (handler) {
190 handler.call(me.scope || me, me, me.value);
191 }
192 me.onSelect();
193 }
194 return me;
195 },
196
197 acceptDate: function() {
198 var me = this;
199 var hourSet = me.hourField.getValue();
200 var minuteSet = me.minuteField.getValue();
201 var currentDate = me.value;
202 currentDate.setHours(hourSet);
203 currentDate.setMinutes(minuteSet);
204 me.setValue(currentDate);
205 me.fireEvent('select', me, currentDate);
206 },
207
208 handleDateClick: function(e, t) {
209 var me = this;
210 var handler = me.handler;
211 var hourSet = me.hourField.getValue();
212 var minuteSet = me.minuteField.getValue();
213 var auxDate = new Date(t.dateValue);
214 e.stopEvent();
215 if (!me.disabled &&
216 t.dateValue &&
217 !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)
218 ) {
219 me.doCancelFocus = me.focusOnSelect === false;
220 auxDate.setHours(hourSet, minuteSet, 0);
221 me.setValue(new Date(auxDate));
222 delete me.doCancelFocus;
223 if (handler) {
224 handler.call(me.scope || me, me, me.value);
225 }
226 // event handling is turned off on hide
227 // when we are using the picker in a field
228 // therefore onSelect comes AFTER the select
229 // event.
230 me.onSelect();
231 }
232 },
233
234 selectedUpdate: function(date) {
235 var me = this;
236 var dateOnly = Ext.Date.clearTime(date, true);
237 var t = dateOnly.getTime();
238 var currentDate = (me.pickerField && me.pickerField.getValue()) || new Date();
239 var cells = me.cells;
240 var cls = me.selectedCls;
241 var cellItems = cells.elements;
242 var c;
243 var cLen = cellItems.length;
244 var cell;
245
246 cells.removeCls(cls);
247
248 for (c = 0; c < cLen; c++) {
249 cell = Ext.fly(cellItems[c]);
250
251 if (cell.dom.firstChild.dateValue == t) {
252 me.fireEvent('highlightitem', me, cell);
253 cell.addCls(cls);
254
255 if (me.isVisible() && !me.doCancelFocus) {
256 Ext.fly(cell.dom.firstChild).focus(50);
257 }
258
259 break;
260 }
261 }
262 if (currentDate) {
263 me.hourField.setValue(currentDate.getHours());
264 me.minuteField.setValue(currentDate.getMinutes());
265 }
266 }
267 });
http://lada.wald.intevation.org