[Lada-commits] [PATCH 1 of 2] Added new DateTimeFields
Wald Commits
scm-commit at wald.intevation.org
Wed Mar 18 13:54:23 CET 2015
# HG changeset patch
# User Raimund Renkert <raimund.renkert at intevation.de>
# Date 1426683258 -3600
# Node ID 1f51b6020f8c1e01cc000fc313df67683ce0a091
# Parent 199246596bf748412d716743129f666299391143
Added new DateTimeFields.
diff -r 199246596bf7 -r 1f51b6020f8c app/view/widget/base/DateTimeField.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/app/view/widget/base/DateTimeField.js Wed Mar 18 13:54:18 2015 +0100
@@ -0,0 +1,64 @@
+Ext.define('Lada.view.widget.base.DateTimeField', {
+ extend: 'Ext.form.field.Date',
+ alias: 'widget.datetimefield',
+ requires: [
+ 'Lada.view.widget.base.DateTimePicker'
+ ],
+
+ format: 'm/d/Y H:i',
+
+ mimicBlur: function(e) {
+ var me = this,
+ picker = me.picker;
+
+ // ignore mousedown events within the picker element
+ if (!picker ||
+ !e.within(picker.el, false, true)
+ ) {
+ me.callParent(arguments);
+ }
+ },
+
+ collapseIf: function(e) {
+ var me = this;
+
+ if (Ext.getVersion().major === 4
+ && !me.isDestroyed
+ && !e.within(me.bodyEl, false, true)
+ && !e.within(me.picker.el, false, true)
+ ) {
+ me.collapse();
+ }
+ },
+
+ createPicker: function() {
+ var me = this;
+
+ return new Lada.view.widget.base.DateTimePicker({
+ pickerField: me,
+ floating: true,
+ hidden: true,
+ focusable: true,
+ focusOnShow: true,
+ minDate: me.minValue,
+ maxDate: me.maxDate,
+ disabledDatesRE: me.disabledDatesRE,
+ disabledDatesText: me.disabledDatesText,
+ disabledDays: me.disabledDays,
+ disabledDatesText: me.disabledDaysText,
+ format: me.format,
+ startDay: me.startDay,
+ minText: Ext.String.format(me.minText, me.formatDate(me.minValue)),
+ maxText: Ext.String.format(me.maxText, me.formatDate(me.maxValue)),
+ listeners: {
+ scope: me,
+ select: me.onSelect
+ },
+ keyNavConfig: {
+ esc: function() {
+ me.collapse();
+ }
+ }
+ });
+ }
+});
diff -r 199246596bf7 -r 1f51b6020f8c app/view/widget/base/DateTimePicker.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/app/view/widget/base/DateTimePicker.js Wed Mar 18 13:54:18 2015 +0100
@@ -0,0 +1,267 @@
+Ext.define('Lada.view.widget.base.DateTimePicker', {
+ extend: 'Ext.picker.Date',
+ alias: 'widget.datetimepicker',
+ requires: [
+ 'Ext.picker.Date',
+ 'Ext.form.field.Number'
+ ],
+
+ todayText: 'Jetzt',
+
+ renderTpl: [
+ '<div id="{id}-innerEl" role="grid">',
+ '<div role="presentation" class="{baseCls}-header">',
+ // the href attribute is required for the :hover selector to work in IE6/7/quirks
+ '<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>',
+ '<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
+ // the href attribute is required for the :hover selector to work in IE6/7/quirks
+ '<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>',
+ '</div>',
+ '<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">',
+ '<thead role="presentation"><tr role="row">',
+ '<tpl for="dayNames">',
+ '<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
+ '<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
+ '</th>',
+ '</tpl>',
+ '</tr></thead>',
+ '<tbody role="presentation"><tr role="row">',
+ '<tpl for="days">',
+ '{#:this.isEndOfWeek}',
+ '<td role="gridcell" id="{[Ext.id()]}">',
+ // the href attribute is required for the :hover selector to work in IE6/7/quirks
+ '<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',
+ '</td>',
+ '</tpl>',
+ '</tr></tbody>',
+ '</table>',
+ '<div id="{id}-timeEl" role="presentation" class="{baseCls}-footer">',
+ '<table cellspacing="0">',
+ '<colgroup><col width="70"><col width="40"><col width="40"></colgroup>',
+ '<tr>',
+ '<td>',
+ '<div id="{id}-timeLabelEl" role="presentation">{%this.renderTimeLabel(values, out)%}</div>',
+ '</td><td>',
+ '<div id="{id}-timeHourEl" role="presentation">{%this.renderTimeHour(values, out)%}</div>',
+ '</td><td>',
+ '<div id="{id}-timeMinuteEl" role="presentation">{%this.renderTimeMinute(values, out)%}</div>',
+ '</td>',
+ '</tr>',
+ '</table>',
+ '<table cellspacing="0">',
+ '<colgroup width="75"></colgroup>',
+ '<tr>',
+ '<td>',
+ '<div id="{id}-footerNowEl" role="presentation">{%this.renderTodayBtn(values, out)%}</div>',
+ '</td><td>',
+ '<div id="{id}-footerAcceptEl" role="presentation">{%this.renderAcceptBtn(values, out)%}</div>',
+ '</td>',
+ '</tr>',
+ '</table>',
+ '</div>',
+ '</div>',
+ {
+ firstInitial: function(value) {
+ return Ext.picker.Date.prototype.getDayInitial(value);
+ },
+ isEndOfWeek: function(value) {
+ // convert from 1 based index to 0 based
+ // by decrementing value once.
+ value--;
+ var end = value % 7 === 0 && value !== 0;
+ return end ? '</tr><tr role="row">' : '';
+ },
+ renderTodayBtn: function(values, out) {
+ Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
+ },
+ renderMonthBtn: function(values, out) {
+ Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
+ },
+ renderTimeLabel: function(values, out) {
+ Ext.DomHelper.generateMarkup(values.$comp.timeLabel.getRenderTree(), out);
+ },
+ renderTimeHour: function(values, out) {
+ Ext.DomHelper.generateMarkup(values.$comp.hourField.getRenderTree(), out);
+ },
+ renderTimeMinute: function(values, out) {
+ Ext.DomHelper.generateMarkup(values.$comp.minuteField.getRenderTree(), out);
+ },
+ renderAcceptBtn: function(values, out) {
+ Ext.DomHelper.generateMarkup(values.$comp.acceptBtn.getRenderTree(), out);
+ }
+ }
+ ],
+
+ beforeRender: function () {
+ var me = this;
+ me.hourField = new Ext.form.field.Number({
+ ownerCt: me,
+ ownerLayout: me.getComponentLayout(),
+ value: 0,
+ increment: 1,
+ minValue: 0,
+ maxValue: 23,
+ listeners: {
+ change: me.changeTimeValue,
+ scope: me
+ }
+ });
+
+ me.minuteField = new Ext.form.field.Number({
+ ownerCt: me,
+ ownerLayout: me.getComponentLayout(),
+ value: 0,
+ increment: 1,
+ minValue: 0,
+ maxValue: 59,
+ listeners: {
+ change: me.changeTimeValue,
+ scope: me
+ }
+ });
+
+ me.timeLabel = new Ext.form.Label({
+ ownerCt: me,
+ ownerLayout: me.getComponentLayout(),
+ text: 'Zeit'
+ });
+ me.acceptBtn = new Ext.button.Button({
+ ownerCt: me,
+ ownerLayout: me.getComponentLayout(),
+ text: 'Übernehmen',
+ handler: me.acceptDate,
+ scope: me
+ });
+ me.callParent();
+ },
+
+ finishRenderChildren: function() {
+ var me = this;
+ me.callParent();
+ me.timeLabel.finishRender();
+ me.hourField.finishRender();
+ me.minuteField.finishRender();
+ me.acceptBtn.finishRender();
+ },
+
+ showTimePicker: function() {
+ var me = this;
+ var el = me.el;
+ Ext.defer(function() {
+ var xPos = el.getX();
+ var yPos = el.getY() + el.getHeight();
+ me.timePicker.setHeight(30);
+ me.timePicker.setWidth(el.getWidth());
+ me.timePicker.setPosition(xPos, yPos);
+ me.timePicker.show();
+ },1);
+ },
+
+ beforeDestroy: function() {
+ var me = this;
+ if (me.rendered) {
+ Ext.destroy(
+ me.minuteField,
+ me.hourField
+ );
+ }
+ me.callParent();
+ },
+
+ changeTimeValue: function (field, nValue, oValue) {
+ },
+
+ setValue: function(value) {
+ value.setSeconds(0);
+ this.value = new Date(value);
+ return this.update(this.value);
+ },
+
+ selectToday: function() {
+ var me = this;
+ var btn = me.todayBtn;
+ var handler = me.handler;
+ var auxDate = new Date();
+
+ if (btn && !btn.disabled) {
+ me.pickerField.setValue(new Date(auxDate.setSeconds(0)));
+ me.setValue(new Date(auxDate.setSeconds(0)));
+ if (handler) {
+ handler.call(me.scope || me, me, me.value);
+ }
+ me.onSelect();
+ }
+ return me;
+ },
+
+ acceptDate: function() {
+ var me = this;
+ var hourSet = me.hourField.getValue();
+ var minuteSet = me.minuteField.getValue();
+ var currentDate = me.value;
+ currentDate.setHours(hourSet);
+ currentDate.setMinutes(minuteSet);
+ me.setValue(currentDate);
+ me.fireEvent('select', me, currentDate);
+ },
+
+ handleDateClick: function(e, t) {
+ var me = this;
+ var handler = me.handler;
+ var hourSet = me.hourField.getValue();
+ var minuteSet = me.minuteField.getValue();
+ var auxDate = new Date(t.dateValue);
+ e.stopEvent();
+ if (!me.disabled &&
+ t.dateValue &&
+ !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)
+ ) {
+ me.doCancelFocus = me.focusOnSelect === false;
+ auxDate.setHours(hourSet, minuteSet, 0);
+ me.setValue(new Date(auxDate));
+ delete me.doCancelFocus;
+ if (handler) {
+ handler.call(me.scope || me, me, me.value);
+ }
+ // event handling is turned off on hide
+ // when we are using the picker in a field
+ // therefore onSelect comes AFTER the select
+ // event.
+ me.onSelect();
+ }
+ },
+
+ selectedUpdate: function(date) {
+ var me = this;
+ var dateOnly = Ext.Date.clearTime(date, true);
+ var t = dateOnly.getTime();
+ var currentDate = (me.pickerField && me.pickerField.getValue()) || new Date();
+ var cells = me.cells;
+ var cls = me.selectedCls;
+ var cellItems = cells.elements;
+ var c;
+ var cLen = cellItems.length;
+ var cell;
+
+ cells.removeCls(cls);
+
+ for (c = 0; c < cLen; c++) {
+ cell = Ext.fly(cellItems[c]);
+
+ if (cell.dom.firstChild.dateValue == t) {
+ me.fireEvent('highlightitem', me, cell);
+ cell.addCls(cls);
+
+ if (me.isVisible() && !me.doCancelFocus) {
+ Ext.fly(cell.dom.firstChild).focus(50);
+ }
+
+ break;
+ }
+ }
+ if (currentDate) {
+ me.hourField.setValue(currentDate.getHours());
+ me.minuteField.setValue(currentDate.getMinutes());
+ }
+ }
+});
More information about the Lada-commits
mailing list